Apostila de HTML Básico

HTML Básico
Publicado em: 28/04/2003
Como funciona uma página?
O espaço para sua página na Internet fica em um computador, onde estão todos os seus
arquivos de HTML, som, imagem, etc. O computador onde fica a sua home page é chamado de
Servidor, pois a qualquer hora do dia ou da noite ele vai estar ligado para as pessoas poderem
acessar sua home page.
Quando a pessoa entra na sua home page, ela está acessando este espaço. As páginas são
feitas usando a linguagem HTML (HyperText Markup Language). Trata-se de uma linguagem
simples e bem leve, por isso ela é o padrão da Internet. Nas páginas você coloca sons, imagens,
cores.
Além disso, as páginas da Web podem ser ligadas entre si, formando o que se chama de Link.
Com isso, você pode criar uma página sobre um assunto que lhe agrade a partir de uma outra,
com sua foto e um link entre elas. Quando uma pessoa clica neste link, ela vai diretamente para
aquela página que você definiu.
Vamos passar agora às aulas de HTML para você poder começar a construir seu site. Para
visualizar as páginas é necessário um navegador. Os mais conhecidos e utilizados são o Internet
Explorer e o Netscape.
Estes navegadores fazem basicamente a mesma coisa - mostrar as páginas -, mas devido a
algumas diferenças de programação, alguns recursos são visíveis em um e no outro não. O
mesmo acontece com versões mais antigas. Navegadores versão 3 não conseguem mostrar
uma página HTML corretamente. Por isso, durante a construção do seu site, procure testá-lo
nos dois navegadores para verificar se a visualização está correta.
Introdução ao HTML
Todo documento HTML é composto de Tags. Este é o nome dados aos comandos HTML. Você
deve começar sua página com a tag <HTML>, na primeira linha do código, e terminar com
</HTML> na última linha do documento. Perceba que a barra "/" sinaliza o fechamento da tag.
Este fechamento é necessário para que ela possa ser interpretada pelo navegador. A estrutura
das tags é formada por:
<xxx>: Este é o inicio da tag;*

</xxx>: Este é o fechamento da tag para que ela possa funcionar.**
* xxx é apenas uma representação de uma tag, não é uma tag HTML.
** Algumas tags não necessitam do fechamento. Neste caso você será avisado.
Entre o início da tag e o seu fechamento ficam os textos, parâmetros, atributos e até outras
tags que vão formando a sua página. Se você não fechar corretamente as tags, a página não irá
ser mostrada direito ou nem mesmo irá aparecer.
Após iniciar o documento com a tag <HTML> você deve incluir o cabeçalho que é feito com as
tags <HEAD> </HEAD>. E também um título usando o par <TITLE> ... </TITLE>. Geralmente,
o título não é mostrado na página, porém os navegadores o utilizam para entitular a janela de
visualização. Coloque um título bem claro e explicativo para seus documentos.
- A tag <BODY>
O "corpo" do documento deve ser demarcado pelo par <BODY> ... </BODY>. Nesta parte do
documento serão colocados todos os comandos para apresentação de uma página HTML. Entre
as tags <BODY> e </BODY> é que você vai colocar todos os códigos para sua página.
Um documento simples seria digitado da seguinte maneira:
<HTML>
<HEAD>
<TITLE> Meu documento HTML </TITLE>
</HEAD>
<BODY>
Aqui você coloca os comandos em HTML.
</BODY>
</HTML>
Os espaços em branco são ignorados quando o navegador "lê" o código. Assim o código acima
poderia ser escrito da seguinte forma:
<HTML><HEAD><TITLE> Meu documento HTML </TITLE></HEAD><BODY>Aqui você coloca

os comandos em HTML.</BODY></HTML>
A vantagem é que isto economiza espaço em disco, mas é uma maneira muito confusa e
relaxada de programar. Acostume-se a organizar seus programas para poder entendê-los
posteriormente.
- Atributos do <BODY>
Através de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das
páginas, bem como uma imagem de fundo (papel de parede da página):
<BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor" VLINK="cor"

BACKGROUND="imagem que vai aparecer">
Onde:
- BGCOLOR
Cor de fundo (padrão: cinza ou branco)
- TEXT
Cor dos textos da página (padrão: preto)
- LINK
Cor dos links (padrão: azul)
- ALINK
Cor dos links, quando acionados (padrão: vermelho)
- VLINK
Cor dos links, depois de visitados (padrão: azul escuro ou roxo)
- BACKGROUND
Imagem de fundo. Saiba como colocar uma imagem de fundo clicando aqui.
Em "cor", você pode colocar os valores de cores em inglês como:
Preto = black
Branco = white
Azul = blue
Amarelo = yellow
Vermelho = red
Você também pode usar o valor hexadecimal de cores ou "RRGGBB", que é a forma mais
comum de definir cores usadas na Internet.. Com isso você pode colocar em sua página outras
cores diferentes, como um azul-claro. Para isso você deve ter o código das cores, e no lugar de
escrever o nome da cor em inglês, você coloca o valor da cor
Algumas cores disponíveis RRGGBB (hexadecimal):
Cor - Código HTML
PRETO - #000000
BRANCO - #FFFFFF
VERMELHO - #FF0000
VERDE - #00FF00
AZUL - #0000FF
ROSA - #FF00FF
AMARELO - #FFFF00
Agora que você já aprendeu como é o arquivo HTML 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. Há duas formas de formatar o seu texto:
- Tags de título <H> - "Headings"
Com elas você pode apenas definir o tamanho das letras, mas não o tipo de fontes. Veja agora
como ficam as tags "headings" para cabeçalhos que vão do tamanho 1 até 6.
<H1> Este é o primeiro nível </H1>

<H2> Este é o segundo nível </H2>
<H3> Este é o terceiro nível </H3>
<H4> Este é o quarto nível </H4>
<H5> Este é o quinto nível </H5>
<H6> Este é o sexto nível </H6>
Este é o primeiro nível

Este é o segundo nível
Este é o terceiro nível
Este é o quarto nível
Este é o quinto nível
Este é o sexto nível
- Tag <FONT>
- Você pode também usar as tags de fonte no lugar das tags de "headings". Este tipo de tag é a
mais usada, pois você pode definir mais facilmente o tamanho do texto e fonte que você deseja,
e personalizar ainda mais a sua página. A tag é <FONT>, e dentro dela você pode definir vários
parâmetros, como cor, tamanho e tipo de letra. Veja agora como usar as tags de fontes:
- Atributo FACE
- FACE:
Uma evolução que permite a escolha da fonte (tipo de letra) para os textos, a tag é feita assim:
<FONT FACE=fonte_da_letra>Texto</FONT>
Exemplo:
<FONT FACE=Times>Fonte Times New Roman </FONT>
Fonte Times New Roman
<FONT FACE=Arial>Fonte Arial </FONT>

Fonte Arial
<FONT FACE=Courier>Fonte Courier New </FONT>

Fonte Courier New
- Atributo COLOR e SIZE
- COLOR e SIZE:
Atributos cor e tamanho:
<font size="3"> A palavra terá o tamanho 3</font>

A palavra terá o tamanho 3
<font color="red"> A palavra terá a cor vermelha </font>
A palavra terá a cor vermelha.
Podemos também combinar as tags acima:
<font face="Arial" size="2" color="red">Palavra com tamanho 3 e em vermelho </font>
O resultado final será:

Palavra com tamanho 3 e em vermelho
Formatando textos
Você pode formatar o texto, colocando-o em negrito, itálico, sublinhado e centralizado. Assim:
- Tags <B> , <U> , <I> e <CENTER>

<B> Texto </B> - Texto fica em Negrito.
<U> Texto </U> - Texto Sublinhado.
<I> Texto </I> - Texto em Itálico.
<CENTER> Texto </CENTER> Texto centralizado.
Os códigos também podem ser escritos uns sobre os outros, acumulando seus efeitos, como por
exemplo:
<CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER>
O resultado é:
Teste 1 e Teste 2
Parágrafos
- Tag <P> - Parágrafos:
Em HTML são necessários comandos para definir parágrafos. Não basta você simplesmente
pressionar "ENTER" para que a linha vá para baixo, como em editores de texto comuns. Você
terá que colocar uma tag para um parágrafo ou para uma linha nova.
Para fazer um parágrafo novo, basta colocar a tag <P>. Por exemplo, escreva no editor o
seguinte, deste jeito:
Parágrafo 1<P>Parágrafo 2.
O resultado será este:
Parágrafo 1
Parágrafo 2
- Tag <BR> - Linhas
Como você pode ver, o navegador mesmo faz um parágrafo novo cada vez que você coloca esta
tag. Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a
tag <BR>. Por exemplo, escreva:
Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2.

O resultado será este:
Parágrafo 1
Linha 1
Parágrafo 2
Linha 2
- Alinhamento de textos com a tag <P>
Os parágrafos também podem ter atributos para o alinhamento dos textos. Basta apenas
incluir depois do "P" o parâmetro "align=tipo de alinhamento". Os atributos são:
- Left: Alinhamento à esquerda

- Rigth: Alinhamento à direita
- Center: Centralizado
- Justify: Texto justificado (Só funciona em navegadores versão 4 ou superior)
Para incluir um destes atributos é simples. Veja os exemplos:
<p align="left">Texto alinhado à esquerda</p>
<p align="right">Texto alinhado à direita</p>
<p align="center">Texto centralizado</p>
<p align="justify">Texto justificado</p>
Incluindo imagens
Agora que você já sabe incluir e formatar os textos de sua página, é possível que você queira
dar mais vida à sua página, incluindo imagens e fundos nela.
Você faz as imagens em programas separados, em seu editor gráfico preferido. Ou pode usar
imagens de outros sites. Mas os formatos ideais para home pages são GIF e JPG. Você não
poderá usar o formato BMP.
A tag para inserir uma imagem em sua página é a seguinte:
<img src="nome do arquivo de imagem que vai aparecer">

Em "imagem que vai aparecer" você coloca o nome da imagem .gif ou .jpg ou o URL onde
ela está para ser mostrada. 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.
- Atributos de Imagem
- Width e Height
São os atributos de largura e altura da imagem (Width: Largura da imagem - Height: Altura
da imagem). Se você não incluí-los, não se preocupe. A imagem vai aparecer assim mesmo.
Mas definindo os tamanhos da imagem ela carregará mais rápido.
Outra vantagem em usar o Width e Height é que você pode diminuir ou aumentar o tamanho
de uma figura como você desejar, porém não recomendamos que você redimensione as
imagens com esta opção. Se você quiser ter uma imagem menor, use um editor de imagem
pra diminuir o tamanho dela, a imagem ficará mais bonita e também será mais leve para
carregar. Se você tem uma página com galeria de imagens e uma "pré-vizualização" delas
menores, sempre crie uma imagem menor com o editor de imagens, nunca use a imagem
"maior" redimensionada, ela vai demorar muito a carregar e a vizualização não ficará boa.
- 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 navegadores colocam uma borda na figura se este
atributo estiver com um valor maior que zero. A vantagem é ocultar a borda que aparece e
que indica que há um link em volta das figuras clicáveis. Muitas vezes esta borda faz a
imagem ficar feia, quando o valor atribuído é zero. Veja um exemplo de imagem com borda
igual a zero:
Agora veja a mesma imagem com uma borda igual a 2:
Uma tag de imagem com os atributos acima combinados ficaria assim:
<img src="nome do arquivo de imagem que vai aparecer alt="texto" border=0

width="largura da imagem" height="altura da imagem">
Um exemplo:
<img src="orbita.gif alt="Aqui aparece o texto alternativo" border=1 width="100"
height="50">
O resultado é:
- Dicas e Formato de Arquivos de imagem
- TAMANHO EM Kb:
Evite ao máximo colocar imagens maiores do que 30Kb em sua página pois, quanto mais
arquivos tiver e quanto maiores eles forem, mais lenta será a transfência, não é bom ter
imagens "pesadas" na página, isso só vai tornar o carregamento mais demorado e os
visitantes podem acabar desistindo de esperar. Procure organizar e dividir as imagens em
seu site de modo que ele não fique muito pesado, nem sempre agrada aos visitantes ter
muitas imagens.
- PROGRAMAS:
É essencial que seja escolhido um bom programa de edição de imagens para que seu site
tenha uma boa apresentação gráfica. Entre os mais usados estão o Corel Draw, Adobe
Photoshop e Paint Shop Pro.
- O FORMATO GIF:
Formato dominante na Internet, o GIF é um tipo de arquivo gráfico relativamente compacto
(quando comparado com o BMP por exemplo) e o GIF pode ser transparente, não
transparente ou animado.
Um GIF transparente é aquele onde uma cor pode ser escolhida para ser transformada em
transparente quando vista por um navegador e mostrar o que há embaixo. Os programas
que são mais usados para criar gifs e permitem que se crie transparências são o Photoshop e
o Fireworks.
Os GIFS animados são aqueles que têm movimento. Nada mais são que uma seqüência de
GIFS previamente preparados. O criador do GIF animado, usando um programa como o GIF
Animator, escolhe as imagens que formarão a seqüência que dará a idéia de movimento.
- O FORMATO JPEG (jpg):

Grandes fotos geralmente são salvas neste formato pois, nestes casos, se consegue reduzir
bastante o tamanho em bytes da imagem, sem prejudicar sua qualidade. É aconselhável,
antes de mandar um arquivo GIF grande para Web, testar como ficaria se salvo como JPG.
- O FORMATO BMP:
Esses bitmaps, apesar de muito utilizados no Windows, são muito pesados para a Web. Se
quiser colocar alguma imagem que estiver neste formato, salve-a antes como GIF ou JPG
usando um editor de imagens como o Paint Shop Pro, Photoshop ou FireWorks.
Alinhando as imagens
Você pode usar muitos recursos para fazer o alinhamento de textos e imagens em sua
página, e dar uma organização e visual diferentes. Para fazer os alinhamentos, você inclui
parâmetros do alinhamento dentro da tag de imagem. Assim:
Veja como o texto fica na imagem. Este é um exemplo de alinhamento

padrão; você não precisa incluir nenhuma tag.
Agora veja como o texto fica no topo da imagem.
Este é um exemplo de alinhamento de texto no topo da imagem. Para fazer este tipo de
alinhamento, a tag de imagem deve ficar assim:
<img src="nome da imagem " align="top">

Repare que só incluímos o align="top" na tag de imagem.
Veja como o texto fica no meio da imagem.
Este é um exemplo de alinhamento no meio da imagem. Para este efeito a tag de imagem
deve ficar assim:
<img src="nome da imagem" align="middle">

Repare que só incluímos o align="middle" na tag de imagem.
Veja que agora você tem um efeito onde o texto fica ao redor da imagem, igual ao texto em
jornais. Trata-se de um ótimo recurso para quando você deseja colocar um texto ao lado de
uma foto que destaque mais o assunto do texto.
A tag para este alinhamento é:

<img src="nome da imagem" align="left">
Veja que agora a imagem está alinhada do lado direito e o texto fica ao redor. É exatamente
o oposto do alinhamento à esquerda.
A tag para este alinhamento é:

<img src="nome da imagem" align="right">
- Para se ter uma imagem centralizada:
<CENTER><img src="nome da imagem"></CENTER>
O resultado é:
Criando links
Links são os pontos clicáveis do documento HTML que levam a qualquer outro documento da
sua página ou site na Internet. Podemos fazer links internos, para documentos no mesmo
servidor, links externos para qualquer lugar na Web, ou até mesmo links para um mesmo
ponto dentro de uma página. Ambos dependem da tag:
<a href="nome-do-lugar-a-ser-levado">descrição</a>
- "Nome-do-lugar-a-ser-levado" você coloca o arquivo html que você quer que seja visitado,
por exemplo dados.htm ou por um URL como http://www.starmedia.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 a StarMedia", você colocaria este
código:
<a href="http://www.starmedia.com">Clique aqui para visitar a StarMedia </a>
Resultado: Clique aqui para visitar a StarMedia
Também existem os links para fazer com que as pessoas enviem um email. Se você quer um
lugar para os usuários deixarem um email, faça assim:
<a href="mailto:seu email">Deixe um email para mim ! </a>
Resultado: Deixe um email para mim!
- Dica: Se você quiser colocar um link para uma outra página dentro da sua home page,
você não precisa colocar todo o endereço como
http://orbita.starmedia.com/~seunome/pagina.html. Basta apenas colocar o nome do
arquivo e, pronto, ficaria assim:
<a href="pagina.html">Este é um link para uma página no seu site </a> - Como fazer um
link abrir em outra janela?
É possível que você queira colocar um link em sua página que abra em uma outra janela
para que o visitante não saia do seu site, por exemplo, colocar um link para uma home page
fora do site. Fazer isso é muito simples. Basta incluir um atributo "TARGET" (alvo), assim:
<a href="http://www.starmedia.com" target="_blank" >Clique aqui para visitar a StarMedia

</a>
O resultado é: Clique aqui para visitar a StarMedia
Se você clicar, será aberta uma nova janela. Há outras opções que podem ser colocadas
como alvos, mas isso você verá mais adiante na seção de Frames, em HTML Avançado.
- Como fazer um link para um ponto na mesma página?

É possível fazer com que clicando em um link você vá diretamente para uma determinada
pate da página. Este recuso é chamado de Âncoras. Você pode saber mais sobre este
recursos na seção "Avançado" na barra de navegação.
- Como fazer uma imagem ter um link

Você pode fazer com que uma imagem possa ter um link. É bem simples. Na tag de link, em
vez de colocar o texto com a descrição, coloque a tag de imagem. Veja:
<A HREF="nome-do-lugar-a-ser-levado"> <IMG SRC="nome do arquivo de imagem que vai

aparecer"> </A>
Em "nome-do-lugar-a-ser-levado" você coloca o arquivo html que você quer que seja
visitado, por exemplo, dados.htm ou um URL como http://www.starmedia.com. Em "nome
do arquivo de imagem que vai aparecer" você deve colocar o nome correto da imagem que
vai estar na página, por exemplo, "foto.gif".
Veja um exemplo de imagem com link:

<A HREF="http://www.starmedia.com/orbita"><img src="orbita.gif" width="100"
height="75" alt="Esta imagem tem um link para a StarMedia Home Pages"
border="1"></a>
O resultado é:
Repare que, além da tag "comum" de imagem, colocamos outros atributos como "border=1"
(borda da imagem) , tamanho e o texto alternativo. Tudo isso você aprendeu na seção
"Incluindo imagens".
- Como fazer links para download de arquivos

Para saber como fazer links para download de arquivos, você deve visitar a seção "Criar links
para download" e descobrir todos os detalhes e dicas para criar os links.
Criar links para download

É provável que, depois de criar suas páginas, você queira colocar arquivos para que os
visitantes façam download em sua home page. Este é um recurso bem fácil e simples.
Vamos explicar.
Não existe um comando que faça o download. O que acontece é que, sempre que aparece
um tipo de arquivo que o navegador não reconhece, ele automaticamente inicia o download.
Exemplo: Se o navegador não consegue abrir um arquivo "zip" (compactado), ele
automaticamente inicia o download.
Os links normalmente são direcionados a arquivos html. Se você deseja colocar um arquivo
para download, tudo que você precisa fazer é direcionar o link para ele como se estivesse
colocando um link para uma página. Exemplo: Para o download de um arquivo
"exemplo.exe", o código de um link simples ficaria assim:
<a href="exemplo.exe">Descrição do link</a>
- Observações
Existem alguns tipos de arquivos que você pode querer disponibilizar para download, mas
que os navegadores, em vez de fazer o download, abrem com programas que você já tenha
instalado. Se você, por exemplo, colocar um link para um arquivo de vídeo ".avi" ou ".mpg",
o navegador abrirá o programa para exibir esse vídeo. Para evitar isso, a melhor solução é
compactar estes arquivos para o formato .zip. Assim, não haverá problemas. Além disso, a
compactação do arquivo faz com que ele fique menor e o download demore menos tempo
para ser feito.
Listas
Você usa listas para criar menus simples ou organização de temas e textos em sua página.
O HTML permite definir três categorias distintas de listas:

- Ordenadas,
- Sem ordenação
- E uma especial, chamada lista de definição.
- Listas Ordenadas
As listas ordenadas são numeradas e só usam um bullet (marca de · ) para demarcar cada
uma das linhas.
Em listas ordenadas, o navegador se encarrega de colocar os números que referenciam cada

lista. Uma lista ordenada deve ser envolvida pelo par <OL> ... </OL>.
Exemplo 1:
<OL>
<LI> Primeiro item de uma lista ordenada
<LI> Segundo item de uma lista ordenada
<LI> Terceiro item de uma lista ordenada
</OL>
Produz o seguinte resultado:
1. Primeiro item de uma lista ordenada

2. Segundo item de uma lista ordenada
3. Terceiro item de uma lista ordenada
- Listas sem Ordenação

Em listas não ordenadas é utilizado algum símbolo gráfico. Este tipo de lista será envolvido
pelo par <UL> ... </UL>.
Para que o interpretador distinga um trecho de texto de uma lista deverá ser colocado no
início de cada linha a diretiva <LI>, não havendo a necessidade de fechar esta tag com
</LI>. Alguns exemplos:
Exemplo 2:
<UL>
<LI> Primeiro item de uma lista não ordenada
<LI> Segundo item de uma lista não ordenada
<LI> Terceiro item de uma lista não ordenada
</UL>
 Primeiro item de uma lista não ordenada

 Segundo item de uma lista não ordenada
 Terceiro item de uma lista não ordenada
- Listas Encadeadas
O próximo exemplo será de uma lista encadeada. Você pode encadear tantas listas quantas
quiser, desde que envolva cada nível de encadeamento com <OL> ... </OL> ou <UL> ...
</UL>.
<OL>
<LI> Primeiro item de uma lista encadeada.
<LI> Segundo item de uma lista encadeada.
<UL>
<LI> Terceiro item de uma lista encadeada.
<LI> Quarto item de uma lista encadeada.
</UL>
<LI> Quinto item de uma lista encadeada.
</OL>
1. Primeiro item de uma lista encadeada.

2. Segundo item de uma lista encadeada.
o Terceiro item de uma lista encadeada.
o Quarto item de uma lista encadeada.
3. Quinto item de uma lista encadeada.
A numeração de listas ordenadas obedece ao nível de encadeamento das respectivas linhas.
Não é preciso usar a tag <P> para forçar quebras de linha, pois os comandos <UL> e <OL>
forçam uma quebra de linha automaticamente.
Você pode incluir tags após cada tag de lista como uma tag para definir a fonte e o tamanho
da letra ou a cor. Você pode combinar estas tags. Você também pode colocar links em cada
lista, bastando apenas usar a tag de link logo após a tag de lista. Veja o exemplo:
<OL>
<LI><a href="#"> Primeiro item de uma lista ordenada com link </a>
<LI> Segundo item de uma lista ordenada sem link
<LI><a href="#"> Terceiro item de uma lista ordenada com link </a></OL>
O resultado é:
1. Primeiro item de uma lista ordenada com link

2. Segundo item de uma lista ordenada sem link
3. Terceiro item de uma lista ordenada com link
Inserindo Imagem de Fundo

Da mesma forma que é possível definir uma cor de fundo diferente para as páginas, pode-se
colocar uma imagem como papel de parede. Com isso você pode criar um site muito mais
bonito.
Vamos explicar como colocar uma imagem de fundo e também características básicas sobre
as imagens de fundo.
A imagem de fundo é um atributo que colocamos dentro da Tag <BODY> que você aprendeu
no início deste tutorial. Veja como fica:
<BODY BACKGROUND="nome da imagem">
Em "nome da imagem" você coloca o nome do arquivo de imagem que você deseja que seja
o fundo. Ele pode ser do tipo GIF ou JPG.
- Características de imagens de fundo
Quando uma imagem é menor que o tamanho da tela, o navegador se encarrega de "repetir"
essa imagem por toda a tela para que ela possa cobrir todo o espaço. Este é um ótimo
recurso, pois você não vai ter que criar uma imagem do tamanho da tela. Isso faria a
imagem ser muito grande e demorar muito a carregar. Além disso, há muita diferença entre
os tamanhos das telas dos micros.
Letreiros e Linhas
- Letreiros
É possível colocar mais recursos em seu site. Um deles é o letreiro. A imagem fica "rolando"
pela tela. Ele é feito com a tag "<MARQUEE>", porém este recurso só funciona no Internet
Explorer. No Netscape, o texto ficará parado. Por isso analise bem quando valerá a pena
usá-lo!
Veja como usar este recurso:
<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>
- Em "BEHAVIOR" você coloca o tipo de efeito, que pode ser "SCROLL" ou "SLIDE".
- Em "WIDTH" você pode definir o tamanho que o letreiro vai ocupar na tela. Veja :
<MARQUEE BEHAVIOR=SCROLL WIDTH=100%>Texto</MARQUEE>

Resulta em:
- Linhas
Com as linhas é possível que você crie separações entre textos e imagens. É muito simples
criar uma linha. Basta incluir a tag <HR> (não é preciso fazer o fechamento dela).
Veja o resultado:
Atributos da linha:
Você pode definir atributos para a linha, como alinhamento, largura e cor. Veja como fazer: -
WIDTH
Você define a largura da régua, em pixels ou em porcentagem. Veja:
<HR WIDTH=50%> insere uma linha que ocupa 50% do espaço disponível na tela.
- ALIGN
Define o alinhamento da régua que pode ser "Left" (esquerda), "Right" (direita) ou "Center"
(centralizado):
<HR WIDTH=100% ALIGN=RIGHT> insere uma linha de comprimento 100% (do espaço
disponível na tela) e alinhada à direita.
- COLOR
Define a cor para a linha, este recurso não funciona no Netscape 4x. Para colocara cor, basta
incluir ela na tag da seguinte forma:
<HR WIDTH=100% COLOR="#FFFFFF>
- NOSHADE
Define se a linha vai ter um efeito tridimensional. Se você não incluir este atributo, a linha
terá o efeito tridimensional.
Exemplo combinando os atributos:
<HR WIDTH=100% ALIGN=RIGHT COLOR="#CC0000" NOSHADE>
Insere uma linha de comprimento 100% (do espaço disponível), alinhada à direita, sem
efeito tridimensional (feito pelo atributo NOSHADE) e com cor vermelha.
Veja o resultado:

Apostila de HTML Básico

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila de HTML Básico

Enviado por

Direitos autorais:

Formatos disponíveis

HTML Básico

Publicado em: 28/04/2003

Como funciona uma página?

<xxx>: Este é o inicio da tag;*

<HTML><HEAD><TITLE> Meu documento HTML </TITLE></HEAD><BODY>Aqui você coloca

<BODY BGCOLOR="cor" TEXT="cor" LINK="cor" ALINK="cor" VLINK="cor"

Em "cor", você pode colocar os valores de cores em inglês como:

Cor - Código HTML

- Tags de título <H> - "Headings"

<H1> Este é o primeiro nível </H1>

Este é o primeiro nível

Este é o quarto nível

Este é o quinto nível

Este é o sexto nível

<FONT FACE=Arial>Fonte Arial </FONT>

<FONT FACE=Courier>Fonte Courier New </FONT>

- Atributo COLOR e SIZE

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

Podemos também combinar as tags acima:

<font face="Arial" size="2" color="red">Palavra com tamanho 3 e em vermelho </font>

O resultado final será:

- Tags <B> , <U> , <I> e <CENTER>

<U> Texto </U> - Texto Sublinhado.

<I> Texto </I> - Texto em Itálico.

<CENTER> Texto </CENTER> Texto centralizado.

<CENTER><B><U>Teste 1</U> <I>e</I> Teste 2</B></CENTER>

- Tag <P> - Parágrafos:

- Tag <BR> - Linhas

Parágrafo 1<BR>Linha 1<P>Parágrafo 2<BR>Linha 2.

- Alinhamento de textos com a tag <P>

- Left: Alinhamento à esquerda

Para incluir um destes atributos é simples. Veja os exemplos:

<p align="left">Texto alinhado à esquerda</p>

<p align="right">Texto alinhado à direita</p>

<p align="center">Texto centralizado</p>

<p align="justify">Texto justificado</p>

A tag para inserir uma imagem em sua página é a seguinte:

<img src="nome do arquivo de imagem que vai aparecer">

Agora veja a mesma imagem com uma borda igual a 2:

Uma tag de imagem com os atributos acima combinados ficaria assim:

<img src="nome do arquivo de imagem que vai aparecer alt="texto" border=0

- Dicas e Formato de Arquivos de imagem

- O FORMATO JPEG (jpg):

Veja como o texto fica na imagem. Este é um exemplo de alinhamento

Agora veja como o texto fica no topo da imagem.

<img src="nome da imagem " align="top">

<img src="nome da imagem" align="middle">

A tag para este alinhamento é:

A tag para este alinhamento é:

- Para se ter uma imagem centralizada:

<CENTER><img src="nome da imagem"></CENTER>

<a href="http://www.starmedia.com">Clique aqui para visitar a StarMedia </a>

Resultado: Clique aqui para visitar a StarMedia

Resultado: Deixe um email para mim!

<a href="http://www.starmedia.com" target="_blank" >Clique aqui para visitar a StarMedia

O resultado é: Clique aqui para visitar a StarMedia

- Como fazer um link para um ponto na mesma página?

- Como fazer uma imagem ter um link

<A HREF="nome-do-lugar-a-ser-levado"> <IMG SRC="nome do arquivo de imagem que vai

Veja um exemplo de imagem com link:

- Como fazer links para download de arquivos

Criar links para download

<a href="exemplo.exe">Descrição do link</a>

O HTML permite definir três categorias distintas de listas: