as meta tags
as meta tags são tags especiais, posicionadas no cabeçalho dos documentos
html. contêm informações extras sobre o documento, essas informações
possuem diversas aplicações, mas neste tópico trataremos apenas das que
ajudam os sites de busca a encontrar o conteúdo da home page.
veja o exemplo de meta tags:
<meta name="keyword" content="criandosite, home page, site, grátis,
gratuito, especial, galeria, busca, destaque, sites pessoais">
<meta name="description" content="criandosite, o maior portal de
hospedagem grátis do brasil">
explicando melhor o código acima:
· o comando meta keyword possui uma coleção de palavras-chave que
servem aos mecanismos de busca, para que encontrem as páginas que mais
coincidem com o objeto da busca;
· o comando meta description possui uma breve descrição do conteúdo da
página, e serve para que os mecanismos de busca consigam exibir as páginas
retornadas de uma forma amigável e auto-explicativa;
para inserir comandos meta em suas páginas, copie o código acima e insira-o
dentro do cabeçalho do seu documento (entre as tags <head> e </head>).
seja bastante criterioso na escolha das melhores palavras-chave (coloque no
máximo trinta), pois elas podem fazer a diferença.
existem outras meta tags, com diversas aplicações. aguarde, em breve
falaremos sobre elas.
após ter elaborado as metatags para suas páginas, você pode cadastrá-las
em sites de busca.
código fonte
apesar dos programas wyswyg (what you see what you get - o que você vê é
o que você terá) como frontpage, dreamweaver e muitos outros serem
bastantes úteis, são péssimos "escritores", pelo menos a grande maioria
deles. eles enchem o código fonte de tags desnecessárias e com isso, a
página fica mais pesada para carregar.
se você for escrever uma página, dê preferência para os editores em modo
texto. eles são mais difícies de serem utilizados por iniciantes em html, mas
caso você tenha um conhecimento intermediário, não tenha dúvida que o
resultado será bem melhor.
tag div - conteúdo
a tag <div> configura um bloco todo de conteúdo (podendo conter textos,
tabelas, imagens, etc). o alinhamento pode ser à esquerda (left), à direita
(right) e centralizado (center). veja a sintaxe padrão da tag:
<div align="right">exemplo de conteúdo alinhado
com o uso da tag <b>div</b>, neste caso com o
atributo right </div>
abaixo, o resultado gerado pela tag acima:
exemplo de conteúdo alinhado com o uso da tag <div>, neste caso com o
atributo right
veja outros resultados possíveis, obtidos com a variação dos atributos:
exemplo de conteúdo alinhado com o uso da tag <div>, neste caso com o
atributo left que posiciona todo o conteúdo à esquerda.
exemplo de conteúdo alinhado com o uso da tag <div>, neste caso
com o atributo center que posiciona todo o conteúdo no centro.
a tag <div> ganhou novas funcionalidades com a chegada do dhtml, sendo
que hoje os elementos div também pode servir como layers (camadas de
código) que você pode usar para posicionar elementos (textos, imagens,
tabelas) em qualquer lugar da sua página.
tag title - título da página
a tag <title> (e sua tag de fechamento </title>) informa o título do
documento. o título de um documento html aparece em uma série de lugares,
como por exemplo:
· na barra superior dos browsers;
· no cabeçalho das páginas html impressas;
· nos resultados dos mecanismos de busca em geral;
tag a href - inserção de links
1. criar um link para outro site
para criar links, usa-se a tag a em conjunto com os atributos href ou name.
veja como fazer um link para o hpg:
<a href="http://www.criandosite.com.br"
target="_blank" > link para portal
<b>criandosite</b></a>
na prática, o código acima fica assim:
link para portal criandosite
um visitante na sua página que clicar sobre o link acima será levado à página
principal do hpg. como você deve ter notado, o link abriu outra página. para
fazer isso, use o atributo target="_blank".
2. criar uma imagem com link
para criar links em imagens, usa-se a tag a href em torno da tag img, que
chama a imagem. veja o código abaixo:
<a href="http://www.criandosite.com.br"
target="_blank"><img src="figura.gif"></p>
veja que o link criou uma borda na imagem. para retirar essa borda, insira o
atributo border="0" dentro da tag img.
3. criar um link interno
para criar links para certas regiões dentro da sua página, usa-se a tag a
name (para definir as regiões em si) e a tag a href para chamar essas
regiões.
presta atenção nas tags dos dois próximos exemplos:
<a
name="topodapagina">
a tag acima define a região chamada "topodapagina".
note que:
1) a tag a name não precisa ser fechada com </a>
2) não se usa, neste caso, o atributo target.
agora veja a segunda parte do processo:
<a
href="#topodapagina">voltar
para o topo</a>
a tag href do exemplo acima é feita para chamar a região "topodapagina",
definida pelo a name. note que o link é feito usando o caractere "#" junto do
nome da região, porque o "#" indica que o link está dentro da mesma página.
além disso, a tag a href precisa ser fechada com </a>.
para ver um exemplo prático desse tipo de link, clique no botão "topo da
página" existente no final desta tela, ou então clique aqui.
4. criar um link para endereço de email
para criar links para endereços de email, usa-se a tag a href como nos outros
links, mas com um detalhe: no atributo href, onde seria digitado o endereço
de destino do link, insere-se a palavra mailto: seguida do endereço de email
desejado.
veja um exemplo prático abaixo:
<a
href="mailto:suporte@criandosite.com.br">mandenos
um email</p>
veja abaixo o resultado obtido:
mande-nos um email
obs: nesse caso também não se deve usar o atributo target.
TecCodigos Copyright © 2011 | Template created by O Pregador | Powered by Blogger
0 comentários:
Postar um comentário