Olá pessoal, que bom estar aqui novamente com vocês. Durante esta semana recebi muitas solicitações para um artigo sobre as meta tags. Aqui está.
Vou abordar o que são e a finalidade das meta tags, exemplos de algumas das meta tags e como o Dreamweaver as insere. Vamos lá.
Em primeiro lugar precisamos entender que as meta tags não ficam visíveis para o usuário final. Se não, por que usá-las então? Simples, elas armazenam preciosas informações sobre o website, informações essas que são interpretas pelos browsers, search engines, validadores, dentre outros.
Entendam-as como a identidade de uma página, assim como você tem a sua e essa difere você do restante da população.
As meta tags são dispostas no <header> de sua página. Como dito anteriormente, elas não ficam visíveis para o usuário final. Existem aproximadamente umas 30 à sua disposição. Mas, fique tranquilo, você certamente não precisará utilizar-se de todas elas.
Ao criarmos uma nova página no Dreamweaver, temos uma única meta tag inserida, vejamos:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled
Document</title>
</head>
<body>
</body>
</html>
Esta tem por finalidade, informar ao browser o modo de renderizar os códigos da página, seja: content="text/htm; ou content="application/xhtml+xml;l; Agora qual você utilizará, é bem subjetivo, uma vez que há consideráveis diferenças entre as duas.
Para o assunto recomendo a leitura de um artigo do Bruno Torres, XHTM: Pensando no futuro? E temos também o modo de codificação dos caracteres charset=iso-8859-1".
Além dessa, o Dreamweaver nos auxilia na inserção de outras mais. Veja as opções na imagem abaixo:
Estas opções localizam-se na aba HTML. Vejamos o uso da primeira opção, na imagem abaixo:
Explicando:
Em Attribute: escolhi a opção Name, para especificar o nome da meta tag que desejo inserir. A outra opção em Attribute é http-equiv. Acima há um exemplo dela.
Em Value, informei o nome, robots. E em Content, all. Esta meta tag é utlizada para dizer aos buscadores (como o Google, Yahoo, MSN, etc...) que podem "ficar à vontade com o conteúdo do site".
Agora um exemplo da segunda e terceira opção respectivamente:
As meta tags acima inseridas tem utilidade somente para os buscadores. A primeira armazena as palavras chaves (Keywords) que serão analisadas pelos robores de busca. Já a segunda armazena uma breve descrição do seu site.
Agora vamos falar sobre a quarta opção, a meta tag refresh. Com esta é possível atualizar a página automaticamente a cada x segundos ou direcionar o usuário para um outra página após x segundos. Observe a imagem abaixo, exemplificando o seu uso:
Note que configurei de uma forma a direcionar o usuário para a home do iMasters após 10 segundos do carregamento da página. Sua configuração como pôde perceber é muito simples. Mas, vamos entendê-la bem.
Em Delay: especifiquei a quantidade de segundos que será necessário para que determinada ação seja executada. Já em Action temos duas alternativas, sendo elas: Go to URL, onde você informa a página em que o usuário será redirecionado após a quantidade de segundos informada no Delay.
Ou a opção: Refresh this document, que atualizará a página automaticamente de x em x segundos (esse x em x segundos, é o segundo informado em Delay).
Agora vamos falar sobre a tag <base....>, que também se aloja no <head> do documento. Particularmente nunca a utilizei, mas vou explicar o seu funcionamento.
Primeiro veja um exemplo com sua configuração:
O objetivo da tag é simples: definir um link padrão para todos os links contidos na página. No exemplo coloquei este link como padrão: http://www.imasters.com.br/downloas/, ainda informei que os links deverão ser abertos em uma nova janela (não gosto de links que abrem desta forma. Você gosta? Leia uma discussão sobre o assunto no webinsider: http://webinsider.uol.com.br/vernoticia.php/id/2550).
Bom, suponhamos que você queira fazer um link que aponte para este endereço: http://www.imasters.com.br/nc.php?cc=239 e que o mesmo abrisse em uma nova janela. Então bastaria fazermos assim:
<a href="../nc.php?cc=539">Relação de matérias publicadas por Leandro Vieira</a>
Uma vez que temos um endereço padrão definido na tag base iMasters e ele influenciará todos os links. Reparei também que não preciso utilizar o atributo target="_blank" para a tag a. Pois esta configuração está contida na tag <base>.
Para finalizar, falaremos sobre a tag <link....>.
Esta tag sem dúvida é muito útil, com ela
inserimos as folha de estilos (CSS), endereço
dos feed RSS, os favicon, dentre outros.
Mostrarei um exemplo para inserir uma folha de estilos,
veja:
É muito simples sua configuração, assim como as outras. No caso da folha de estilos, basta informar o Href, ou seja, o endereço da mesma e o Rel, stylesheet. Pronto.
Bom, é isso aí. Espero que tenham gostado e que o mesmo tenha sido proveitoso. Continuem sugerindo novas matérias, gosto muito da dica de vocês.
Um forte abraço e uma ótima semana para todas.
8 Comentários
Qual a sua opinião?