Webdesign A tag HEAD e as Meta tags

Tamanho: px

Começar a partir da página:

Download "Webdesign A tag HEAD e as Meta tags"

João Guilherme Figueiroa Aldeia
8 Há anos
Visualizações:

1 Webdesign A tag HEAD e as Meta tags

2 Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em:

3 HEAD Como vimos anteriormente, o nosso documento HTML é formado por um Cabeçalho <head> e um corpo <body>. O cabeçalho, contém informações sobre o HTML como por exemplo seu Título, definido pela tag <title> bem como instruções especiais como, por exemplo, Meta Tags, instruções css e javascript;

4 Title A Tag Title apresenta o título do documento, ou seja será o texto que será colocada na barra de título do navegador e usada pelos motores dos buscadores para nomear o conteúdo de sua página. <title>nome da Minha Página</title> Ela não possui atributos!

5 Meta Tags As META tag s em HTML são linhas de códigos específicas, que tem diferentes funcionalidades. Dentre as principais utilidades destas tag s está a descrição do conteúdo do site, pois esta descrição será utilizada pelos mecanismos de busca para a catalogação do site. Nestas tag s poderemos inserir palavras-chave que serão utilizadas pelos buscadores, bem como poderemos definir a autoria do site.

6 Meta Tags As META tag s deverão serincluídas no código, dentro da tag <head>.por exemplo:

7 Meta Tags Observem que no exemplo temos dois stributos na tag META: name e content. name: especifica o tipo do elemento meta. content: específica o parâmetro que está sendo configurado para o tipo de elemento configurado no atributo name. name= keywords Para este elemento o ideal é configurar o atributo content com as palavras-chave que representam o conteúdo do seu site. Sempre iremos separar as keywords por vírgula e não iremos quebrar linha, pois isso pode comprometer a seleção da página pelo buscador. Também é recomendando utilizar as palavras em minúsculo e sem acentuação. <meta name="keywords" content= web 2.0, html, css, meta">

8 Meta Tags name= description Para este elemento o ideal é configurar o atributo content com uma ou duas frases que representem um resumo do conteúdo do site. Este resumo é normalmente utilizado pelos mecanismos de busca para apresentar informações sobre o site. Para este elemento utilizaremos uma formatação mais elaborada, colocando acentuação, etc. <meta name= description" content= Este site está apresentado informações de utilização das META tag s.">

9 Meta Tags name= author Neste elemento iremos informar a autoria sobre o desenvolvimento da página HTML. Esta informação é considerada de extrema importância, pois poderá ser utilizada pelo buscador quando o nome é utilizado como palavra de busca. Também é interessante, pois se consolida como uma forma de apresentar a autoria do código, mesmo quando o contato direto com o desenvolvedor não pode ser apresentado no site. <meta name= author content= João da Silva >

10 Meta Tags name= robots A função deste elemento é indicar aos mecanismos de busca se a sua página será ou não indexada. Se aplicam quando o site upliza pop-ups ou iframes para mostrar o conteúdo, pois este Ppo de construção individualmente não tem significado. Também foram pensadas para sites que são desenvolvidos para grupos específicos e, efetivamente, não desejam que seu conteúdo seja indexado pelos mecanismos de busca.

11 Meta Tags name= robots valores possíveis: <meta name="robots" content="index,follow"> <meta name="robots" content="noindex,follow"> <meta name="robots" content="index,nofollow"> <meta name="robots" content="noindex,nofollow > <meta name="robots" content="noarchive"> Os valores "index" e "noindex" se referem ao tratamento da página inicial, ou seja, se o buscador deve ou não incluí-la nos resultados, respectivamente. Os valores "follow" e "nofollow" se referem aos links da página inicial, se estes devem ser visitados e indexados ou não, respectivamente.

12 Meta Tags Exemplos: <meta name="robots" content="index,follow"> Indexa a página inicial e todas as páginas nela referenciadas, através dos links nelas contidos. <meta name="robots" content="noindex,follow"> Não indexa a página inicial, mas indexa as páginas nela referenciadas, através dos links nelas contidos.

13 Meta Tags Atributo http-equiv é utilizado para fornecer informações adicionais do site. Por exemplo: <meta http-equiv="content-language" content="pt"> Especifica o idioma primário do site. Também é útil para os mecanismos de buscas como forma de classificar o idioma do site. Também são utilizados pelos navegadores para exibição adequada dos caracteres especiais e acentuação, bem como para uso dos corretores ortográficos.

14 Meta Tags http-equiv= content-type <meta http-equiv="content-type" content="text/html; charset=iso "> Especifica o tipo de conteúdo do documento HTML e o conjunto de caracteres. É extremamente recomendado utilizar esta META tag, como forma de indicar o tratamento adequado por parte do navegador. No exemplo acima, indica que o conteúdo é um texto em linguagem HTML. O charset indica a codificação da linguagem, neste caso para exibir textos em línguas derivadas do Latim. As codificações mais utilizadas são a ISO e UTF-8

15 Meta Tags http-equiv= refresh <meta http-equiv="refresh content="5;url= Este elemento possibilita efetuar o redirecionamento do site. Neste caso, após 5 segundos seu site será redirecionado para o site do google. Podemos utilizar este elemento, como forma de fazer auto-refresh do site, bastando configurar o parâmetro url com o endereço do próprio site.

16 Links Declarados É ainda no <head> que se definem os links para os arquivos externos. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="stylesheet.css" type="text/css" media="all" /> <script type="text/javascript" src="javascriptfile.js"></script>

17 Estilos dentro do arquivo Html <head> <style type="text/css"> h1 {color:red;} p {color:blue;} </style> </head>

18 Estilos dentro do arquivo Html <style type="text/css"> h1 {color:red;} p {color:blue;} </style>

19 Doctype Existem diferentes tipos de documentos que podem ser armazenados na web e apresentados pelos navegadores. Mais ainda, existem diferentes versões de HTML. Para que o navegador consiga apresentar corretamente o código HTML, é uilizada a declaração <!DOCTYPE> DOCTYPE não é uma tag HTML

20 Versões da HTML

21 Doctype 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN " Aceita todos elementos HTML 4, exceto elementos de apresentação (layout) ou deprecated (em desuso) deste. Também não permite o uso de framesets.

22 Doctype 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " Aceita todos elementos HTML 4, inclusive elementos de apresentação (layout) ou deprecated (em desuso) deste. Também não permite o uso de framesets.

23 Doctype 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN " Aceita todos elementos HTML 4, inclusive elementos de apresentação (layout) ou deprecated (em desuso) deste, Permitindo inclusive o uso de framesets.

24 Doctype XHTML 1.0 Strict <!DOCTYPE HTML PUBLIC W3C//DTD XHTML 1.0 Strict//EN Aceita todos elementos HTML 4, exceto elementos de apresentação (layout) ou deprecated (em desuso) deste. Também não permite o uso de framesets. A marcação precisa ser um XML formatado corretamente.

25 Doctype XHTML 1.0 Transitional <!DOCTYPE HTML PUBLIC W3C//DTD XHTML1.0 Transitional//EN Aceita todos elementos HTML 4, inclusive elementos de apresentação (layout) ou deprecated (em desuso) deste. Também não permite o uso de framesets. A marcação precisa ser um XML frmatado corretamente.

26 Doctype XHTML 1.0 Frameset <!DOCTYPE HTML PUBLIC W3C//DTD XHTML 1.0 Frameset//EN Aceita todos elementos HTML 4, inclusive elementos de apresentação (layout) ou deprecated (em desuso) deste. Também não permite o uso de framesets. A marcação precisa ser um XML frmatado corretamente.

27 Doctype HTML 5 <!DOCTYPE html> Nova versão de HTML que conta com inserção de novos elementos, simplificação de outros e desuso de elementos do HTML 4. Uma síntese de suas alterações pode ser obida em:

Documentos relacionados

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Declaração DOCTYPE e Tag Raiz html

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Declaração DOCTYPE e Tag Raiz html IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage DeclaraçãoDOCTYPEeTagRaizhtml ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger