Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rodrigo_laguna

Meta Tags

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

Rodrigo_laguna    0

Rodrigo_laguna
Postado

Olá, to fazendo um site e vou querer usar as meta tags, o site é com Templates, minha dúvida é a seguinte: se devo adicionar as metags no template ou somente na index do site, e se podem me dar uma exemplo de como utilizar essas opções.

 

Valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Morpheus#2005    1

Morpheus#2005
Postado

Bom acho que isso lhe dara uma clareada na ideía.

 

O atual mercado da Web

 

Hoje em dia, não é tão difícil se fazer um site, qualquer um com um pouco de dedicação e com as mágicas da tecnologia abre um editor WYSIWYG (What you see is What you Get – O que você vê, é o que você tem) e consegue fazer mil maravilhas.

 

Um ponto fraco disso tudo, é que nós, profissionais da Web sofremos com isso. Quem já não perdeu um trabalho para um “cara” que cobrava R$ 100,00 para desenvolver um Web Site?

 

Bom, chega de choro, vamos ao que interessa.

 

DTDs, DOCTYPES

 

O Fato é que em muitos dos casos, quando se desenvolvem sites, esquecem, ou nem mesmo sabem que existe um padrão por trás disso tudo. De fato, isso não é obrigatório, mas ajuda na depuração de erros de design no seu site.

 

Ter um site “validado” não é difícil, existem apenas algumas regras a serem seguidas, tais como:

 

DTD – Document Type Definition: Por padrão, o Adobe Dreamweaver, Microsoft Expression Web e outros editores WYSIWYG já trazem no topo quando você cria um documento HTML. Exemplo:

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

 

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

 

Nota-se que não há somente um tipo de HTML, existem vário, tais como HTML 4.01 Strict e Transitional, XHTML 1.0 Transitional entre outros.

 

Estes tipos de HTML seguem um padrão da W3C (World Wide Web Consortium)

 

Uma maior descrição dos tipos de DTD, pode ser encontrado aqui http://www.alistapart.com/stories/doctype/

 

As ferramentas que processam HTML (Browsers por exemplo), precisão saber qual tipo de definição ele está usando. Então é por isso que um HTML precisa especificar um DTD em seu topo.

 

Especificar um DOCTYPE, também implica em informar ao Browser ou outras ferramentas de renderização de arquivos HTML, qual a versão do HTML está sendo utilizada, e esta é uma parte muito importante do documento.

 

Seguindo a risca os critérios acima, teríamos como início, o seguinte modelo:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”>

 

<head>

 

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

 

<title>Untitled 1</title>

 

</head>

 

<body>

 

</body>

 

</html>

 

Nota-se que já na primeira linha do documento, definimos nosso DOCTYPE.

 

Na segunda linha (<html xmlns=”http://www.w3.org/1999/xhtml”>), informamos o XMLNS.

 

O XMLNS é um Namespace da própria W3C Schools, e deve sempre conter este valor.

 

http://www.w3.org/TR/REC-xml-names/

 

Em seguida vem o resto do documento.

 

META-TAGs

 

Outra coisa pouco usada são as META-TAGs, que servem como base para busca, identificação da página e do autor, entre outros.

 

Veja abaixo as respectivas descrições:

 

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><meta name=”author” content=”Andre Baltieri - andrebaltieri@hotmail.com” />

 

<meta name=”description” content=”Descrição do Documento” />

 

<meta name=”keywords” content=”Palavra Chave 1, Palavra Chave 2 ” />

 

Na linha 1, informamos que o conteúdo descrito em nosso documento é do tipo texto/HTML, e que o tipo de caractere utilizado em nosso documento é UTF-8 (Conjunto de caracteres que possui “Ç”, “~” entre outros.)

 

Na linha 2, definimos o atributo “Author”, que nada mais é do que o autor do documento, coisa muito importante e pouco utilizada.

 

Na linha 3, definimos uma breve descrição do documento, e na linha 4, adicionamos “Palavras-Chaves” ao nosso documento, item de suma importância para futuras buscas em seu web site.

 

Sendo assim, nosso documento já foi um pouco modificado, agora ele está mais robusto e seguindo já alguns padrões.

 

FAVICON

 

Para complementar, só por curiosidade, podemos adicionar um ícone ao nosso documento, é o chamado “favicon”, ou “favorite icon”. Este ícone irá representar o documento, sendo exibido na barra de endereços do Browser, antes do endereço, ou nas abas dos navegadores, antes do título do documento.

 

<link rel=”shortcut icon” href=”Imagens/favicon.ico” mce_href=”Imagens/favicon.ico” type=”image/x-icon” />

 

Rapare que usamos a tag LINK, e na propriedade REL, dizemos que ele é do tipo “SHORTCUT ICON”, algo referente aos favoritos em português.

 

Em seguida, o atributo HREF se encarrega de informar onde o ícone se encontra, e por fim, informamos o TYPE(Tipo) do arquivo, que é uma imagem, por isso usa-se “image/x-icon”.

 

Bom, neste exato momento, temos o seguinte modelo:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”>

 

<head>

 

<title>Minha Página</title>

 

<link href=”CSS/Estilos.css” mce_href=”CSS/Estilos.css” rel=”stylesheet” type=”text/css” />

 

<link rel=”shortcut icon” href=”Imagens/favicon.ico” mce_href=”Imagens/favicon.ico” type=”image/x-icon” />

 

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

 

<meta name=”author” content=”Andre Baltieri - andrebaltieri@hotmail.com” />

 

<meta name=”description” content=”Breve Descrição da Página” />

 

<meta name=”keywords” content=”Algumas palavras chaves para buscas” />

 

</head>

 

 

................................................................Créditos........

.................................................................................

......

André Baltieri

Link Original

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito