Beruflich Dokumente
Kultur Dokumente
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.
Ir para o topo
C O R E S NO SEU SITE:
Você pode escrever as cores (em inglês) ou colocar seu código. Porém, para escrever só
é aceito 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
Mas você pode definir varias tonalidades e cores, basta ter a lista de códigos das cores,
ou
CLICAR AQUI
Ir para o topo
CABEÇALHOS :
Este é o tamanho:<H1>
Este é o tamanho:<H2>
Este é o tamanho:<H3>
Este é o tamanho:<H4>
Este é o tamanho:<H5>
Este é o tamanho:<H6>
Você também pode usar a tag <FONT> para definir o tamanho, bem como sua cor e
tipo da fonte.
<FONT FACE> - Define o tipo de letra
<FONT COLOR> - Define a cor da letra
<FONT SIZE> - Define o tamanho da letra
Veja 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>
* Note que você define com mais precisão o tamanho das letras do que a tag <H>.
Ir para o topo
Ir para o topo
Não basta você teclar ENTER para que a linha vá para baixo. Você terá 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 que cada vez que você coloca a TAG <BR> estará fazendo uma nova linha, que
também não deixa de ser um parágrafo.
Se você escrever sem usar as tags <BR> ou <P> o próprio browser quebra as linhas
automaticamente.
Ir para o topo
Para alinhar os parágrafos basta 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.
Ir para o topo
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.extremaonline.com">Conheça Extrema-MG</a> Resultado:
Conheça Extrema-MG
Note que formou-se um link para um determinado site que foi descrito no código acima.
Se você clicar abrirá o referido site em uma outra janela, isto é, sem que você saia deste
site, isto porque foi adicionado o atributo "TARGET", então na verdade, para você 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 use:
<a href="pagina_tal.html">Clic aqui</a> - Note que após o nome da página é colocado
a extensão .html
Ir para o topo
É 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. Veja 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
Veja o exemplo abaixo, note que formou um link na figura e o levará ao referido site
acima.
Lembre-se: foi usado a target"_blank" para abrir em uma nova janela.
Ir para o topo
Na verdade não existe o comando específico. O que acontece é que quando criamos um
link para um arquivo que o navegador não reconhece, ele automaticamente inicia o
download, por exemplo, o navegador não reconhece os arquivos com extensão ZIP,
EXE, RAR, etc., nestes casos ele inicia o download. Veja exemplos:
<a href="arquivo.rar">Clic aqui para baixar</a>
<a href="pasta_tal/arquivo.zip">Clic aqui para baixar</a>
Certas extensões de arquivos fazem com que os navegadores, em vez de fazer o
download, abrem com programas instalados no computador.
Se você fazer um link para um arquivo de vídeo ".avi" o navegador abrirá o programa
para exibir esse vídeo. Para que isso não aconteça, sempre compacte seus arquivos para
download no formato zip ou rar, por exemplo, tornando-os mais leves (menores) e
download será mais rápido.
Ir para o topo
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
• Primeiro item.
• Segundo item.
• Terceiro item. As "bolinhas" são inseridas automaticamente.
Listas Encadeadas:
<OL> <LI> <UL> <LI> <LI> </UL> <LI> </OL> Produz resultado misto.
Ir para o topo
Para você 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 navegador 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.
Ir para o topo
Ir para o topo
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
possue os seguintes atributos:
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 pixels ou em
porcentagem.
height="valor" -Onde o "valor" define a altura da tabela em pixels ou em
porcentagem.
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.
Veja um 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>
Você pode colocar o código acima em apenas uma linha. Resultado:
• 1 item
• 2 item
• 3 item
Ir para o topo
Resume-se em mais de uma página em uma 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.
Exemplo:
<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á salva como
"index.html".
Normalmente nesse 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 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 nesse arquivo para visualizá-lo aberto em seu browser.
As tags <NOFRAME> e </NOFRAME> é usado somente para avisar usuário que
utiliza 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 em 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">
<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 em seu browser.
Ir para o topo
Para inserir uma música em 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 "display" na tela. O internauta
não terá como parar, pausar ou iniciar.
Para que apareça o display na tela, como você vê abaixo, coloque está tag:
<EMBED SRC="musica.mid" AUTOSTART="FALSE" LOOP="TRUE">
* Note que você terá que acionar PLAY para iniciar a música.
* Para que abra a página já tocando a música, coloque este código:
<EMBED SRC="musica.mid" AUTOSTART= LOOP="TRUE">
* Você ainda pode definir o tamanho do display, assim:
<EMBED SRC="musica.mid" AUTOSTART= LOOP="TRUE" WIDTH=145 HEIGHT=25>
Ir para o topo
Para inserir um flash (arquivo com extensão .swf), como abaixo, 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"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"</EMBED>
</OBJECT>
Note no código acima que você pode especificar o tamanho da imagem. Se você não
colocar os atributos "WIDTH e HEIGHT" a imagem ficará no tamanho original
(tamanho que foi criada).
Ir para o topo
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>
<>
Note que está no tamanho reduzido, pois foi utilizado "WIDTH e HEIGHT", mas
não é preciso, pois o tamanho é padrão, a menos que lhe seja útil.
Ir para o topo
META TAGS :
Após feito 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 buscadores, como o Google,
Yahoo, etc "achem" 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" você deve colocar as palavras pelo qual os
buscadores encontrarã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 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 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.
"noindex,nofollow" - Não indexa nem a página inicial e nem os links.
Se é seu primeiro site, está aprendendo, use o primeiro exemplo "index,follow".
Aconselho você que fez um site com FRAMES usar "index,follow" somente na página
que você salvou como index.html, e nas outra páginas "noindex,nofollow" ou
simplesmente não use essa tag nessas páginas.
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="pt">
Coloque em todas as páginas do site, instruindo os navegadores que seu site é feito em
lingua portuguêsa.
<META NAME="GENERATOR" CONTENT="Microsoft FrontPage 5.0">
Indique que programa usou para fazer o site, FrontPage, Bloco de Notas, etc.
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=iso-8859-1">
Indica que você escreveu normalmente seus textos nas páginas html (com acentuação,
etc) sem usar caracteres especiais (ASCII), e a META TAG acima indica isto (palavras
originarias do Latim).
Existem outras Meta Tags que você deve verificar:
Cliando aqui
Ir para o topo
Ir para o topo
Repare que ao clicar ir para âncora você foi redirecionado à outro ponto desta página.
Isto é chamado "ÂNCORA".
Você pode redirecionar o usuário para qualquer ponto de 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>
Você pode criar vários pontos, como:
<a name="ancora2"> e <a href="#ancora2">ir para ancora2</a>
Para fazer o usuário "Ir para o topo" não é necessário uma âncora como acima, tem 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>