Webdesign
A tag HEAD e as Meta tags
Thiago Miranda dos Santos Souza
Conteúdos
WEBDESIGN
Os materiais de aula, apostilas e outras informações
estarão disponíveis em:
www.thiagomiranda.net
Thiago Miranda dos Santos Souza
HEAD
WEBDESIGN
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, deﬁnido pela tag <title>
bem como instruções especiais como, por exemplo,
Meta Tags, instruções css e javascript;
Thiago Miranda dos Santos Souza
Title
WEBDESIGN
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!
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
As META tag´s em HTML são linhas de códigos
especíﬁcas,
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 deﬁnir a autoria do site.
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
As META tag´s deverão serincluídas no código, dentro
da tag <head>.Por exemplo:
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
Observem que no exemplo temos dois stributos na tag
META: name e content.
• name: especiﬁca o tipo do elemento meta.
• content: especíﬁca o parâmetro que está sendo conﬁgurado para o
tipo de elemento conﬁgurado no atributo name.
name=“keywords”
Para este elemento o ideal é conﬁgurar 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">
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
name=“description”
Para este elemento o ideal é conﬁgurar 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.">
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
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”>
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
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 signiﬁcado.
Também foram pensadas para sites que são desenvolvidos
para grupos especíﬁcos e, efetivamente, não desejam
que seu conteúdo seja indexado pelos mecanismos de
busca.
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
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.
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
Exemplos:
<meta name="robots" content="index,follow">
Indexa a página inicial e todas as páginas
referenciadas, através dos links nelas contidos.
nela
<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.
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
Atributo http-equiv é utilizado para fornecer informações
adicionais do site. Por exemplo:
<meta http-equiv="content-language" content="pt">
Especiﬁca o idioma primário do site. Também é útil para
os mecanismos de buscas como forma de classiﬁcar 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áﬁcos.
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
http-equiv=“content-type”
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
Especiﬁca 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 codiﬁcação da
linguagem, neste caso para exibir textos em línguas
derivadas do Latim.
As codificações mais utilizadas são a ISO-8859-1 e UTF-8
Thiago Miranda dos Santos Souza
Meta Tags
WEBDESIGN
http-equiv=“refresh”
<meta http-equiv="refresh“ content="5;url=http://www.google.com/">
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
conﬁgurar o parâmetro url com o endereço do próprio site.
Thiago Miranda dos Santos Souza
Links Declarados
WEBDESIGN
É 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>
Thiago Miranda dos Santos Souza
WEBDESIGN
Estilos dentro do arquivo Html
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
Thiago Miranda dos Santos Souza
WEBDESIGN
Estilos dentro do arquivo Html
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
Thiago Miranda dos Santos Souza
Doctype
WEBDESIGN
• 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
Thiago Miranda dos Santos Souza
Versões da HTML
WEBDESIGN
Thiago Miranda dos Santos Souza
Doctype 4.01 Strict
WEBDESIGN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN” "http://www.w3.org/TR/html4/strict.dtd">
•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.
Thiago Miranda dos Santos Souza
Doctype 4.01 Transitional
WEBDESIGN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN” "http://www.w3.org/TR/html4/loose.dtd">
•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.
Thiago Miranda dos Santos Souza
Doctype 4.01 Frameset
WEBDESIGN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN”
"http://www.w3.org/TR/html4/frameset.dtd">
•Aceita todos elementos HTML 4, inclusive
elementos
de apresentação
(layout)
ou
deprecated
(em desuso)
deste, Permitindo
inclusive o uso de framesets.
Thiago Miranda dos Santos Souza
Doctype XHTML 1.0 Strict
WEBDESIGN
<!DOCTYPE HTML PUBLIC W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
•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.
Thiago Miranda dos Santos Souza
WEBDESIGN
Doctype XHTML 1.0 Transitional
<!DOCTYPE HTML PUBLIC W3C//DTD XHTML1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
•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.
Thiago Miranda dos Santos Souza
WEBDESIGN
Doctype XHTML 1.0 Frameset
<!DOCTYPE HTML PUBLIC W3C//DTD XHTML 1.0 Frameset//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
•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.
Thiago Miranda dos Santos Souza
Doctype HTML 5
WEBDESIGN
<!DOCTYPE html>
Nova versão de HTML que conta com inserção de novos
elementos, simpliﬁcação de outros e desuso de elementos do
HTML 4. Uma síntese de suas alterações pode ser obIda em:
http://www.w3.org/TR/html5-diﬀ/
Thiago Miranda dos Santos Souza