HTML
INTRODUÇÃO AO HTML - COMO FAZER UM SITE
Existem editores HTML que oferecem comodidade para confecção das páginas web, tais como: FrontPage;
Dreamweaver e outros. Mas não será necessário programas avançados, basta abrir o Word ou Bloco de Notas
e salvar como .html.
Todas as páginas de um site são compostas por Tags, que são os comandos html. Todas as páginas devem
começar com a tag <HTML> e terminar com </HTML>. Note-se que a barra "/" determina o encerramento da
tag. Estas são as Tags fundamentais de uma página.
ITENS BÁSICOS EM HTML:
<HTML>
<HEAD>
<TITLE> Título da página </TITLE>
</HEAD>
<BODY> Texto; Imagens; Links; etc </BODY>
</HTML>
As tags podem ser escritas em Maiúscula ou Minúscula Ex.: <html> ou <HTML>.
O Título da página aparecerá no topo da janela do browser.
ATRIBUTOS DE <BODY>
Através de <BODY>, podemos definir cores dos textos, links e fundo das páginas, ou uma imagem de fundo.
Temos então:
BGCOLOR - Cor de fundo
TEXT - Cor da fonte dos textos
LINK - Cor dos links (padrão: azul)
ALINK - Cor dos links, quando clicados (padrão: vermelho)
VLINK - Cor dos Links, depois de visitados (padrão: roxo)
BACKGROUND - Imagem de fundo: Indica o URL da imagem.
Podemos definir tudo de uma só vez, colocando o seguinte código:
<BODY BGCOLOR="YELLOW" TEXT="BLACK" LINK="BLUE" ALINK="RED" VLINK="PURPLE">
Não está no código acima o atributo BACKGROUND pois não é padrão.
1
CORES
Você pode escrever as cores (em inglês) ou colocar o seu código. Porém, para escrever só são aceites 16 cores,
que são:
Preto = black - código = #000000
Branco = white - código = #FFFFFF
Azul = blue - código = #0000FF
Amarelo = yellow - código = #FFFF00
Verde = green - código = #008000
Lima = lime - código = #00ff00
Marron = maroon - código = #800000
Oliva = olive - código = #808000
Azul Celeste = aqua - código = #00ffff
Lilás = fuchsia - código = #ff00ff
Cinza = gray - código = #808080
Azul escuro = navy - código = #000080
Roxo = purple - código = #800080
Verde escuro = teal - código = #008080
Cinza claro = silver - código = #c0c0c0
Vermelho = red - código = #FF0000
CABEÇALHOS
O tamanho das letras ou fontes é definido pela tag <H> - "Headings". A tag <H> normalmente é usada em
CABEÇALHOS e há seis níveis. Com esta tag pode-se definir o tamanho das letras, mas não o tipo da fonte.
Este é o tamanho:<H1>
Este é o tamanho:<H2>
Este é o tamanho:<H3>
Este é o tamanho:<H4>
Este é o tamanho:<H5>
Este é o tamanho:<H6>
2
Pode-se alinhar os cabeçalhos
<H2 ALIGN=CENTER>Texto centralizado</H2>
<H2 ALIGN=RIGHT>Texto alinhado à direita</H2>
<H2 ALIGN=LEFT>Texto alinhado à esquerda</H2>
TAMANHO E CORES DAS LETRAS
Você também pode usar a tag <FONT> para definir o tamanho, bem como a sua cor e o tipo da fonte.
<FONT FACE> - Define o tipo de letra
<FONT COLOR> - Define a cor da letra
<FONT SIZE> - Define o tamanho da letra
Verifique abaixo alguns exemplos:
<FONT FACE="ARIAL" SIZE="1" COLOR="RED">Fica assim</FONT>
<FONT FACE="ARIAL" SIZE="2" COLOR="BLUE">Fica assim</FONT>
<FONT FACE="ARIAL" SIZE="3" COLOR="BLACK">Fica assim</FONT>
<FONT FACE="TIMES" SIZE="5" COLOR="BLUE">Fica assim</FONT>.
COMO FORMATAR OS TEXTOS
Formatando o texto em Negrito, Itálico, Sublinhado e Centralizado. TAGS:
<B> - Negrito, <U> - Sublinhado, <I> - Itálico e <CENTER> - Centralizado
<B>Texto em Negrito</B>
<U>Texto Sublinhado</U>
<I>Texto em Itálico</I>
<STRIKE> ou <S> Texto Riscado assim
<SUB> Como em H2O - O número 2 ficou em baixo.
<SUP> Como em Km2 - O número 2 ficou em cima.
<CENTER>Texto Centralizado</CENTER>
Também pode acumular os efeitos, agrupando os códigos Ex.:
<CENTER><B><U><I>O texto fica assim</B></U></I></CENTER>
3
COMO FAZER PARÁGRAFOS E LINHAS
Não é a clicar ENTER para que a linha vá para baixo. Deve-se que colocar uma TAG para um parágrafo ou
para uma nova linha.
Para parágrafo usar a TAG <P> e para linha usar <BR> Exemplo:
<P>
Primeiro Parágrafo
<BR>
Primeira Linha
<P>
Segundo Parágrafo
<BR>
Segunda Linha
Note-se que cada vez que se coloca a TAG <BR> estará fazendo uma nova linha, que também não deixa de
ser um parágrafo. Se escrever sem usar as tags <BR> ou <P> o próprio browser quebra as linhas
automaticamente.
ALINHAMENTO COM A TAG <P>
Para alinhar os parágrafos bastos incluir depois do "P" o parâmetro "align + tipo de alinhamento", conforme
abaixo:
<P ALIGN="LEFT"> Texto alinhado à esquerda.
<P ALIGN="RIGHT"> Texto alinhado à direita.
<P ALIGN="CENTER"> Texto centralizado.
<P ALIGN="JUSTIFY"> Texto justificado.
COMO INCLUIR IMAGENS
A TAG utilizada é: <img src="nome da imagem+extensão"(gif,jpg,bmp,etc)>
Atributos da Imagem:
WIDTH - Define a largura da imagem.
HEIGHT - Define a altura da imagem.
ALT - Texto que aparece quando é passado o mouse sobre a imagem
BORDER - É um valor atribuido à largura da borda da imagem (Contorno).
4
Verifique alguns exemplos:
<img src="zero.gif" alt="Seu texto" border="0">
<img src="zero.gif" alt="Seu texto" border="1">
<img src="zero.gif" alt="Seu texto" border="2" width="20" height="20">
Note-se que no último exemplo especificamos o tamanho da imagem. Não definindo este tamanho, a imagem
aparecerá no tamanho original. É possível especificar um tamanho menor do que a original, pois não
acarretará perda de qualidade da imagem, mas se fizer ao contrário, isto é, definir um tamanho maior que a
original perderá qualidade de imagem.
O correcto é ter a imagem do tamanho certo que deseja que apareça na página. Evite colocar imagens maiores
do que 50 Kb. Quanto maior a imagem mais tempo levará a carregar.
Alinhamento texto de imagens:
<img src="zero.gif" align="top">
<img src="zero.gif" align="middle">
<img src="zero.gif" align="left">
<img src="zero.gif" align="right">
Há também os atributos de moldura, que definem o espaço vertical e horizontal entre as imagens e os textos
circundantes, onde:
<IMG SRC="imagem.gif" VSPACE=espaço vertical>
<IMG SRC="imagem.gif" HSPACE=espaço horizontal>
Ex.: <IMG SRC="imagem.gif" ALIGN="LEFT" WIDTH="10" HEIGHT="10" VSPACE="50">
<IMG SRC="imagem.gif" ALIGN="RIGHT" WIDTH="10" HEIGHT="10" HSPACE="30">
COMO FAZER OS LINKS
Links são pontos clicáveis que levam a qualquer site da internet ou qualquer página do site e até mesmo
qualquer ponto da própria página. A TAG usada é:
<a href="nome do lugar à ser levado">descrição do lugar</a>
Exemplos
<a href="http://www.abola.com">Jornal ABola</a>
5
Note que formou-se um link para um determinado site que foi descrito no código acima. Se clicar abrirá o
referido site em uma outra janela, isto é, sem que saia deste site, isto porque foi adicionado o atributo
"TARGET", então na verdade, para não fechar esta janela, o código inserido aqui foi:
<a href="http://www.extremaonline.com" target="_blank">Conheça Extrema-MG</a>
Para fazer um link para uma outra página do seu site utilize:
<a href="pagina_tal.html">Clique aqui</a> - Note que após o nome da página é colocado a extensão .html
COMO FAZER IMAGEM COM LINK
É simples fazer uma imagem ter um link. Ao invés de colocar o texto com a descrição do lugar, coloque a
TAG de imagem. Verifique o exemplo:
<a href="http://www.extremaonline.com"><IMG SRC="local, nome da imagem + extensão"></a>
Sendo que:
http://www.extremaonline.com é o URL (endereço) do site.
local é caso você tenha armazenado suas imagens em uma pasta. Ex. Pasta "Imagens".
nome da imagem + extensão Exemplo: minhafoto.jpg ou barra.gif
Lembre-se: foi usado a target"_blank" para abrir em uma nova janela.
COMO FAZER LINKS PARA DOWNLOAD
Na verdade não existe um comando específico. O que acontece é que quando criamos um link para um arquivo
que o browser não reconhece, ele automaticamente inicia o download, por exemplo, o browser não reconhece
os arquivos com extensão ZIP, EXE, RAR, etc., nestes casos ele inicia o download. Exemplos:
<a href="arquivo.rar">Clic aqui para download</a>
<a href="pasta_tal/arquivo.zip">Clic aqui para download</a>
Determinadas extensões de arquivos fazem com que os browsers, em vez de fazer o download, abrem com
programas instalados no computador.
6
Se fizer um link para um arquivo de vídeo ".avi" o browser abrirá o programa para exibir esse vídeo. Para que
isso não aconteça, deve compactar sempre os seus arquivos para download no formato zip ou rar, por
exemplo, tornando-os mais leves (menores) e download será mais rápido.
LISTAS
Nesta página já existem várias listas. Logo abaixo já tem outra lista com os nomes:
1. Listas Ordenadas
2. Listas sem ordenação
3. Listas Encadeadas
Exemplos: A lista acima (Ordenada) foi feita com os seguintes códigos:
<OL> <LI> <LI> <LI> </OL> Os números são inseridos automaticamente.
Se desejar trocar os números por letras, Ex.: A, B, C. ao invés de usar só <OL> use <OL START=1
TYPE=A> - Onde "1" indica para começar pela primeira letra do alfabeto.
Lista Sem Ordenação:
<UL> <LI> <LI> <LI> </UL>
Resultado:
Primeiro item.
Segundo item.
Terceiro item. As "bolinhas" (pontos) são inseridas automaticamente.
Listas Encadeadas:
<OL> <LI> <UL> <LI> <LI> </UL> <LI> </OL> Produz resultado misto.
COMO INSERIR IMAGEM DE FUNDO
Para colocar uma imagem de fundo no seu site é só colocar um atributo dentro da TAG <BODY>, assim:
<BODY BACKGROUND="nome da imagem+extensão">.
Quando a imagem é menor que o tamanho da tela, o browser duplica essa imagem tantas vezes forem
necessárias para cobrir todo o espaço da tela. Existem vários tamanhos de telas. Lembre-se: imagens grandes
demoram à carregar.
7
COMO FAZER LETREIROS E LINHAS
Para colocar um letreiro na página é utilizado a TAG <MARQUEE>
Veja o código:
<MARQUEE BEHAVIOR=SCROLL DIRECTION="RIGHT" BGCOLOR="YELLOW"WIDTH=50%>TEXTO</MARQUEE>
Onde:
DIRECTION= indica a direcção "LEFT" ou "RIGHT".
BGCOLOR= indica a cor de fundo do letreiro.
WIDTH= indica a percentagem que o letreiro ocupará na sua página.
Dica: Se quiser que o texto pare no final, ao invés de SCROLL escreva SLIDE.
Outro exemplo:
<MARQUEE DIRECTION="RIGHT"> <FONT SIZE="3" COLOR="RED" FACE="COMIC SANS MS">texto</FONT></MARQUEE>
LINHAS
Para inserir uma linha basta colocar a TAG <HR>.
Não é preciso fechar "</HR>".
Atributos da Linha
Pode definir a largura, cor e alinhamento.
<HR SIZE=10> - Insere uma linha de largura 10 pixels.
<HR WIDTH=50%> - Insere uma linha que ocupa 50% do espaço em tela.
<HR WIDTH=50% ALIGN=RIGHT> - Insere uma linha que ocupa 50% do espaço em tela alinhada à Direita.
Ou LEFT à esquerda.
Cor da Linha
<HR SIZE=1 WIDTH=100% COLOR="RED">
Veja o resultado:
COMO FAZER TABELAS
As tabelas valorizam o Layout das páginas, pois dão harmonia e organização dos textos, imagens, listas, etc. A
tabela é representada pelas Tags <TABLE> e </TABLE> e possuem os seguintes atributos:
8
border="valor" -Onde o "valor" define a largura da borda (contorno).
cellspacing="valor" -Onde o "valor" define o espaço horizontal entre as células.
cellpadding="valor" -Onde o "valor" define o espaço vertical entre as células.
width="valor" -Onde o "valor" define a largura da tabela em pixéis ou em percentagem.
height="valor" -Onde o "valor" define a altura da tabela em pixéis ou em percentagem.
bgcolor="#cor" -Define a cor de fundo da tabela.
bordercolor="#cor" -Define a cor da borda.
background="imagem.jpg" -Define uma imagem de fundo.
A tabela possui alguns comandos que são:
<TR> e </TR> -Define uma linha da tabela.
<TH> e </TH> -Define um cabeçalho da tabela.
<TD> e </TD> -Define a coluna de informações.
<CAPTION> e </CAPTION> -Define o título da tabela.
Exemplo:
<TABLE BORDER="2" BORDERCOLOR="RED" CELLSPACING="10" CELLPADDING="6" WIDTH="50"
HEIGHT="20" BGCOLOR="YELLOW" <TR> <TD> 1a.coluna </TD> <TD>2a.coluna </TD> <TD> 3a.coluna
</TD> </TR> <TR> <TD> 1a.linha </TD> <TD> 1a.linha </TD><TD> 1a.linha </TD> </TABLE> </BR>
Pode colocar o código acima numa linha apenas.
Resultado:
1a.coluna 2a.coluna 3a.coluna
1a.linha 1a.linha 1a.linha
Para que a tabela fique centrada, como acima, utilize a tag <CENTER> antes do código e </CENTER> depois
do código. Também se pode alinhar o texto dentro das células, utilizando os seguintes atributos:
Align="left" -Alinha o texto à esquerda.
Align="right" -Alinha o texto à direita.
Align="center" -Alinha o texto no centro.
Valign="top" -Alinha o texto no topo da célula.
Valign="middle" -Alinha o texto no meio da célula.
Valign="bottom" -Alinha o texto na parte inferior da célula.
9
ADICIONANDO UMA LISTA DENTRO DA CÉLULA:
<TABLE BORDER="1" <TR> <TD>lista dentro da célula<UL> <LI>1 item<LI>2 item<LI>3 item</UL> </TD> </TABLE>
Resultado:
lista dentro da célula
1 item
2 item
3 item
SITE COM FRAMES
Resume-se a mais de uma página numa só tela. É necessário criar três páginas para criar uma página com dois
frames, ou seja, uma página principal onde terá as tags referente ao frame que deverá ser salva como:
index.html e as outras duas serão abertas dentro desta página principal.
Exemplo1:
<HTML>
<HEAD>
<TITLE> Título da página </TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="pagina1.html">
<FRAME SRC="pagina2.html">
<NOFRAME>
</NOFRAME>
</FRAMESET>
<BODY>
</BODY>
</HTML>
Os códigos acima só serão colocados na página principal que será guardada como "index.html".
Normalmente neste tipo de frame a página1.html é usada para os menus e a página2.html para conteúdo geral
do site.
Neste caso <FRAMESET COLS="20%, 80%"> o atributo COLS divide as colunas ou seja, 20% do lado
10
esquerdo e 80% do lado direito da página. Sempre da esquerda para direita. Então a página1.html ocupará
20% do espaço e a página2.html ocupará 80% (espaço vertical).
Copie o código acima, cole no Bloco de Notas e salve como "index.html" depois dê 2 cliques neste
arquivo para visualizá-lo aberto no seu browser.
As tags <NOFRAME> e </NOFRAME> são usadas somente para avisar o utilizador que utiliza um browser
muito antigo que a página contém frames, que não as conseguirá visualizar (muito difícil acontecer).
Exemplo 2:
<HTML>
<HEAD>
<TITLE> Título da página </TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="pagina1.html">
<FRAMESET ROWS="20%, 80%">
<FRAME SRC="pagina3.html">
<FRAME SRC="pagina2.html">
<NOFRAME>
</NOFRAME>
</FRAMESET>
<BODY>
</BODY>
</HTML>
Copie o código acima, cole no Bloco de Notas e salve como "index.html" depois dê 2 cliques nesse
arquivo para visualizá-lo aberto no seu browser.
Exemplo 3:
<HTML>
<HEAD>
<TITLE> Título da página </TITLE>
</HEAD>
<FRAMESET ROWS="20%, 80%">
<FRAME SRC="pagina1.html">
<FRAME SRC="pagina2.html">
11
<NOFRAME>
</NOFRAME>
</FRAMESET>
<BODY>
</BODY>
</HTML>
Copie o código acima, cole no Bloco de Notas e salve como "index.html" depois dê 2 cliques nesse
arquivo para visualizá-lo aberto no seu browser.
COMO INSERIR MÚSICA
Para inserir uma música na sua página, antes de fechar a tag <HEAD> coloque a tag:
<BGSOUND SRC="musica.mid">.
A Extensão do arquivo pode ser .mid ou .wav.
Para que a música toque novamente, sempre, acrescente: loop="-1" Assim:
<BGSOUND SRC="musica.mid" loop="-1">
No exemplo acima a música tocará sem que apareça o "replay" na tela. O internauta não terá como parar,
pausar ou iniciar.
Para que apareça o replay na tela, coloque esta tag:
<EMBED SRC="musica.mid" AUTOSTART="FALSE" LOOP="TRUE">
* Note que terá que accionar PLAY para iniciar a música.
* Para que abra a página já a tocar a música, coloque este código:
<EMBED SRC="musica.mid" AUTOSTART= LOOP="TRUE">
* Pode ainda definir o tamanho do replay, assim:
<EMBED SRC="musica.mid" AUTOSTART= LOOP="TRUE" WIDTH=145 HEIGHT=25>
COMO INSERIR FLASH
Para inserir um flash (arquivo com extensão .swf), como em baixo, coloque este código depois da tag
<BODY>:
<OBJECT CLASSID="FLASH" CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,0,0 "> <EMBED SRC="arquivo.swf" WIDTH="200" HEIGHT="200"
TYPE="application/x-shockwave-flash"
12
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"</EMBED> </OBJECT>
Note no código acima que pode especificar o tamanho da imagem. Se não colocar os atributos "WIDTH e
HEIGHT" a imagem ficará no tamanho original (tamanho que foi criada).
COMO INSERIR VÍDEO
Para inserir um vídeo (arquivo com extensão .avi), como abaixo, coloque este código depois da tag <BODY>:
<EMBED SRC="arquivo.avi" </EMBED>
META TAGS
Após feito o seu site, não basta apenas coloca-lo na internet somente com a tag título, <TITLE> Título da
página</TITLE>, é preciso que os motores de busca, como o Google, Yahoo, etc "encontrem" o seu site, e
outras informações, por isso, você deve inserir as METAS TAGS necessárias, entre <HEAD> e </HEAD>
conforme abaixo:
<META NAME="keywords" CONTENT="palavras chaves">
Note que onde está escrito "palavras-chaves" deve colocar as palavras pelo qual os motores de busca
encontrarão o seu site quando procurado na pesquisa pelo Google, Yahoo, por exemplo. As palavras deverão
ser escritas em minúsculas e separadas por uma vírgula e logo após um espaço. Ex.: "bonito, fotos, casamento,
dicas, downloads, etc".
<META NAME="Description" CONTENT="descrição do seu site">
Informe do que se trata o seu site, coerente com o título e as palavras-chaves.
Ex.: "Site bonito, com fotos de casamento, downloads e dicas".
<META NAME="AUTHOR" CONTENT="seu nome">
Coloque o seu nome, pois é ético e fornece confiança ao site.
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
Sendo:
"index,follow" - Indexa a página inicial e todas as páginas nela indicadas.
"noindex,follow" - Não indexa a página inicial, mas indexa as páginas nela indicada.
"index,nofollow" - Indexa a página inicial, mas não os links que ela indique.
13
"noindex,nofollow" - Não indexa nem a página inicial e nem os links.
Se é o seu primeiro site, está aprendendo, use o primeiro exemplo "index,follow".
É mais rentável utilizar "index,follow" somente na página que guardou como index.html, e nas outras páginas
"noindex,nofollow" ou simplesmente não utilize essa tag nessas páginas.
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="pt">
Coloque em todas as páginas do site, instruindo os utilizadores que o seu site é feito em língua portuguesa.
<META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0">
Indique que programa utilizou para fazer o site, FrontPage, Bloco de Notas, etc.
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=iso-8859-1">
Indica que escreveu normalmente os seus textos nas páginas html (com acentuação, etc) sem utilizar de
caracteres especiais (ASCII), e a META TAG acima indica isto (palavras originarias do Latim).
COMO FAZER UM LINK PARA ENVIAR E-MAIL
Código:
<a href="mailto:[email protected]">Clique Aqui</a>
Note que ao ser clicado no link (Clique Aqui), abrirá o programa que está instalado no computador, exemplo:
Outlook, Incredimail, etc. Porém nem todos têm esses programas instalados, vão procurar os seus e-mails
directamente nos sites, motivo pelo qual deve sempre deixar visível o seu endereço de e-mail, como abaixo:
O meu e-mail é: [email protected] se preferir, Clique Aqui
COMO FAZER UMA CAIXA DE TEXTO
Código:
<textarea rows="5" cols="50" style="background-color: #ffffff">ESCREVA AQUI O SEU TEXTO</textarea>
Fica assim:
ESCREVA AQUI O SEU TEXTO
14
COMO FAZER UMA ÂNCORA :
Pode redireccionar o utilizador para qualquer ponto da sua página ou para outro ponto de outra página.
O código de destino, isto é, o ponto de chegada ao ser clicado é:
Código:<a name="ancora">
E o código do comando "ir para" é:
Código:<a href="#ancora">ir para ancora</a>
Pode criar vários pontos, como:
<a name="ancora2"> e <a href="#ancora2">ir para ancora2</a>
Para fazer o utilizador "Ir para o topo" não é necessário uma âncora como acima, há um código especial para
isto:
Código: <a href="#top">Ir para o topo</a>
Para ir à outra página:
Código: <a href="nomedapagina.html#ancora">ir para ancora</a>
Utilizando uma imagem como âncora:
Código: <a href="#ancora"><img src="imagem.jpg"></a>
15
