Muitas pessoas que editam sites esquecem do principal, editar o cabeçalho.
Vamos inserir este código:
| Arquivo: index.html |
| <html> <head> <title>Exemplo de pagina vista na china</title> </head> <body> <p>água, régua, vírgula, óculos, saúde, ômega, trêm, profissão, leões</p> </body> </html> |
Veja um exemplo de página vista na China = [link]
Veja outro exemplo de página vista na Grécia = [link]
Veja mais um outro exemplo de página vista em Israel = [link]
Por isto, devemos aprender sobre como criar um cabeçalho correto.
| Código Fonte: |
<!-- Configurando o (X)HTML --> |
Vou esplicar uma por uma:
De acordo com as especificações do W3C, um DOCTYPE informa ao validador qual é a versã do HTML, ou XHTML, que está sendo usada, e deve constar no topo de cada página. Eles são elementos essenciais na construção de uma página dentro dos padrões. O (x)HTML e o CSS do seu site não será válido sem eles. Eles também são essenciais para uma correta renderização da sua página.
Se você omitir o DOCTYPE, ou usar um inválido, o browser vai renderizá-lo em “Quirks Mode”, onde o Browser pensa que você escreveu seu HTML de forma antiquada e inválida. Vamos dizer que os padrões do fim da década de 90. Mas se você escolher um DOCTYPE válido, ele ira funcionar em “Standards Compliance Mode”, ou seja, modo de concordância com os padrões.
Abaixo vou deixar uma lista de DOCTYPES e você veja qual é o melhor para se usar em seu site:
Escolhendo um DOCTYPE Strict quer dizer que seu código está seguindo á risca os padrões, sem nenhum tipo de erro de validação
Escolhendo um DOCTYPE Transitional é quando você está fazendo uma transição de uma forma antiga de marcação para uma mais moderna
Escolhendo um DOCTYPE Frameset é para quando você usa Frames em sua página.
O significado de xmlns é o acrônimo de XML namespace
Atualmente está na versão: <html xmlns="http://www.w3.org/1999/xhtml">
Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele usa. É recomendável utilizar esta meta tag em todas as páginas do seu site, porque ela garante que os navegadores irão tratar seu documento da maneira mais apropriada, especialmente quando você utiliza formulários para enviar informações entre páginas. Para quem desenvolve páginas em idiomas orientais, utilizar o conjunto de caracteres apropriados é fundamental para que eles sejam exibidos corretamente.
Os valores mais comuns são:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Onde
text/html define que o conteúdo é um texto em linguagem HTML. Se você desenvolve sites em XHTML ou XML certamente sabe que deverá os valores "application/xhtml+xml" e "application/xml", respectivamente.
iso-8859-1 é a codificação da linguagem mais comum para exibir textos em línguas derivadas do latim.
Em XML (inclusive XHTML), usar o pseudo-atributo para codificação na declaração xml no ínicio do documento ou a declaração textual no início da entidade. Exemplo:
<?xml version="1.0" encoding="utf-8" ?>
Mas atenção, existem considerações complementares que devem ser levadas em conta quando você servir XHTML 1.0 como HTML.
Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da seção <head> do documento. Exemplo:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
Em XHTML, você deverá colocar uma barra "/" no final:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
Para obter informações mais detalhadas siga o link indicados <<<Visualize a lista neste link>>>
Especifica a língua primária da página. Útil para ajudar os buscadores a classificar seu site no idioma apropriado, orientar os navegadores a exibirem a acentuação e caracteres especiais corretamente e para facilitar o uso de corretores ortográficos.
Alguns valores possíveis:
Um exemplo usa o valor "pt":
<meta http-equiv="content-language" content="pt">
Para obter informações mais detalhadas siga o link indicado <<<Visualize a lista neste link>>>
A variação da língua natural (idioma) no texto de uma página deve ser identificada. As línguas naturais são a língua falada, escrita e a gestual. No Brasil a língua falada e escrita é o português e a gestual é a LIBRAS (Língua Brasileira de Sinais).
Assim, quando em um texto em português encontramos a palavra SITE, por exemplo, um leitor de tela gráfico enviará exatamente essa informação, ou seja, será lida palavra igualmente como no idioma principal da página, o português: será lido site.
Quando se faz a marcação da mudança de idioma, as pessoas que estiverem escutando o texto com um leitor de telas ouvirão como no idioma de origem da palavra marcada no código, o inglês. Escutarão foneticamente como "saite", com a pronúncia certa.
A marcação correta para a indicação de idioma é o atributo LANG. Esta tag pode ser usada em todos os elementos de HTML com exceção dos elementos applet, base, basefont, br, frame, frameset, iframe, param e script. Se não for encontrado um elemento mais apropriado para usar este atributo, pode ser utilizada a tag <span>. O objetivo é usá-lo onde você for citar trechos em idioma diferente daquele presente no restante do documento.
As marcações em HTML são, por exemplo: <p lang="en">Parágrafo em inglês.</p>
<li lang="it">item de lista em italiano</li> <a href="http://www.endereçodosite" lang="fr">Site francês.</a>
<span lang="xx">palavra ou expressão estrangeira</span>
em XHTML STRICT: <span lang="xx" xml:lang="xx">palavra estrangeira</span> onde "xx" não é a sigla do país de origem da palavra, mas de seu idioma.
Abaixo colocarei as marcações em vários idiomas para a expressão "Eu te amo":
Da mesma forma que os equivalentes textuais, as marcações de variação de língua não aparecem na tela, ficando somente no código da página que é transmitido pelo leitor de tela. No entanto, se formos passar um corretor ortográfico de qualidade no texto da página, ao chegar em palavras de outros idiomas ele mostra como erro. Por outro lado, se estiver marcado o idioma correto da palavra, ele só apresentará erro se a palavra também não for reconhecida no idioma indicado.
Erro Comum.
Muitas vezes a pronúncia incorreta das palavras dificulta o entendimento das informações. No entanto, se mal aplicadas as marcações de mudança de idiomas, podemos nos deparar com uma página em português totalmente pronunciada em inglês, o que dificultará o entendimento da mesma forma.
Isso pode acontecer por dois motivos:
se um criador de páginas abre uma marcação para o inglês e se esquece de fechá-la. Essas marcações têm início e fim, servindo tanto para apenas uma palavra como para expressões, citações, parágrafos, itens de listas e, assim, as marcações têm de ser bem colocadas no início e fim dos elementos que alteram o idioma. Darei o exemplo do idioma inglês por ser aquele em que esses erros são mais comuns:
O diretor da <span lang="en" xml:lang="en">Microsoft declarou que...
tudo que vier após a marcação de mudança de idioma que começou com a palavra "Microsoft", virá pronunciado em inglês, ou seja... declarou que... até o final da página. Faltou, no caso, logo após a palavra Microsoft a marcação de finalização, o </span>.
A outra possibilidade de erro é a de um desenvolvedor de outro país colocar que a página é toda em inglês e alguém copiar o código da página colocando o texto em português. Isso acontece muito com blogs estrangeiros utilizados por brasileiros, ou mesmo com blogs brasileiros copiados de softwares americanos, com programas editores de páginas da web que estão no idioma inglês.
Title Tag: é a tag mais importante,
pois ela define o título da sua página. As ferramentas de busca a
utilizam para definir o assunto de sua página. Portanto, tente trabalhar
as suas principais palavras-chaves no título de cada página. Evite
colocar a mesma title tag para todas as páginas.
Seu código em HTML é <title>título da página</title>.
Eu considero esta tag importantíssima. Ela pode ser útil quando algum usuário procura pelo seu nome em um buscador, ou quando o site do seu cliente não tem uma forma de contato direto com você desenvolvedor por alguma razão.
<META NAME="author" CONTENT="Nome do Autor">
Infelizmente, trabalhamos com o risco de clientes não pagarem pelo nosso trabalho, motivo pelo qual também é importante manter uma tag com o seu nome no código do site para provar que ele foi desenvolvido por você.
Descrição da página.
Coloque um breve resumo do conteúdo do seu site. Deve conter no máximo até 160 caracteres, não mais do que isso.
(Palavras-chave): coloque as palavras mais importantes relacionadas ao conteúdo do seu blog. As palavras devem ser separadas por uma vírgula (e sem espaço entre elas).
Se for utilizar palavras acentuadas, escreva a palavra com acento e sem acento também. Utilize letras minúsculas, sem quebra de linha. Deve conter no máximo até 200 caracteres.
Uma dica: evite usar muitas palavras-chave, o ideal é usar de 5 a 10 palavras.
Nesta tag você deverá incluir o maior número possível de palavras que se refiram ao seu texto. Se não utilizar as mesmas palavras, tente utilizar sinônimos. Nunca quebre uma linha de palavras-chave, porque seu trecho de código será considerado um erro e será ignorado. Por isso, utilize quantas meta tags keywords você precisar.
<meta name="keywords" content="sites, web, desenvolvimento, html, design">
Sempre separe as palavras com vírgula, e declare todas elas em letras minúsculas - alguns buscadores têm problemas com letras maiúsculas e podem ignorar seu site.
Inclua os termos no singular e no plural (site, sites). No caso de palavras acentuadas, inguinore a acentuação ou utilize os caracteres acentuados em HTML ("manutenção" fica "manutencao" ou "manutenção").
Cada buscador trabalha de forma única, levando em consideração dezenas e às vezes até centenas de valores diferentes na hora de exibir os resultados de uma busca. Infelizmente, alguns desenvolvedores fizeram mal uso deste recurso, o que faz com que alguns robots e spiders não dêem muita atenção às meta tags keywords. Por isso, sempre use palavras-chaves coerentes com o seu conteúdo, e nunca acrescente itens só para aparecer melhor na busca - afinal você sabe que quando o usuário entra no seu site e não encontra o que foi "prometido" a imagem dele está comprometida, e mesmo os buscadores melhoram seus algoritmos de procura a cada dia, e um truquezinho que aparentemente vai te ajudar pode atrapalhar, e muito.
Especifica um endereço de e-mail para entrar em contato com o(s) responsável(is) pelo site.
<meta name="reply-to" content="seu email">
Esta tag funciona para classificar a página por censura, assim como no cinema, suporta os valores:
<meta name="rating" content="general" />
Essa tag é responsável pela indexação ou não indexação de páginas pelos robôs (programa varre a internet a procura de página para indexação) das ferramentas de buscas e também de quais links deve seguir ou não. Nem todas as ferramentas de busca obedecem essa meta tag, portanto, tome cuidado quando usá-la.
Seu código em HTML é<meta Name=”robots” content=”noindex,nofollow”> podendo ter as seguintes variações:
<meta Name=”robots” content=”index, follow”>
<meta Name=”robots” content=”noindex, follow”>
<meta Name=”robots” content=”index, nofollow”>
<meta Name=”robots” content=”noindex, nofollow”>
Observação: A indexação de páginas ou seguimento de link são feitas automaticamente pelos buscadores sem você precisar usar as opções index e follow, mas nada impede que você coloque isso para reforçar essa opções.
Portanto
<meta name="robots" content="index,follow">
Indexa a página inicial e todas as páginas nela referenciadas
<meta name="robots" content="noindex,follow">
Não indexa a página inicial, mas indexa as páginas nela referenciadas
<meta name="robots" content="index,nofollow">
Indexa a página inicial, mas nenhum link que ela contenha
<meta name="robots" content="noindex,nofollow">
Não indexa nem a página inicial e nem seus links.
Meta Tag googlebot = Google
Exemplo:
<meta name="googlebot" content="noimageindex" />
<link rel="stylesheet" type="text/css" href="estilo.css" /> => O atributo type="text/css" indica que aquele link (href="estilo.css") é relativo a importação de um arquivo referente a folhas de estilo.
<script type="text/javascript" src="menu.js"></script> => O atributo type="text/javascript" indica que aquele link (src="menu.js") é relativo a importação de um arquivo referente a linguagem de programação Javascript.
Para inserir um estilo CSS para o seu código, use o seguinte comando:
<style type="text/css">
.
.
.
</style>
Para inserir um comando Javascript no seu código, use o seguinte comando:
<script type="text/javascript" >
.
.
.
</script>
Para indentificar o quem editou tudo isto, porque não colocar os créditos?
<!--
/*
* Autor: Jorge Luíz Gouveia Sousa
* Site: www.webteste123.com
* Contato: livrosaudedigital@hotmail.com
*/
-->