HTML – AULA 1
Prof. Daniela Pires
Sumário
HTML .......................................................................................................................................................................... 3
XHTML ........................................................................................................................................................................ 3
1.
HTML .................................................................................................................................................................. 4
2. HEAD ...................................................................................................................................................................... 4
2.1. TITLE ................................................................................................................................................................ 4
2.2METAS TAG ........................................................................................................................................................ 5
2.2.1 keywords .................................................................................................................................................... 5
2.2.2 description ................................................................................................................................................. 6
2.2.3 Author ....................................................................................................................................................... 6
2.2.4 Cache-Control ............................................................................................................................................ 6
2.2.5 Content-language ...................................................................................................................................... 7
2.2.6 Content-type: ............................................................................................................................................ 7
2.2.7 CopyRight ................................................................................................................................................... 7
2.2.8 Expires ....................................................................................................................................................... 7
2.2.9 Pragma no-cache ....................................................................................................................................... 7
2.2.10 Refresh ..................................................................................................................................................... 7
2.2.11 Robots ..................................................................................................................................................... 8
2.2.12 Imagetoolbar ........................................................................................................................................... 8
2.2.13 Generator ................................................................................................................................................. 8
2.2.14 Revisit-After............................................................................................................................................. 8
2.2.15 Rating ...................................................................................................................................................... 9
2.2.16 Content-Script-Type .................................................................................................................................. 9
2.2.17 Content-Style-Type .................................................................................................................................. 9
2.2.16 DC.title .................................................................................................................................................... 9
1
HTML – AULA 1
Prof. Daniela Pires
2.2.17 DC.Creator ................................................................................................................................................ 9
2.2.18 DC.Creator.adress .................................................................................................................................... 9
2.2.19 DC.Suject ................................................................................................................................................. 9
2.2.20 DC.Description ......................................................................................................................................... 9
2.2.21 DC.Publisher .......................................................................................................................................... 10
2.2.22 DC.Custodian ......................................................................................................................................... 10
2.2.23 DC.Date.Created .................................................................................................................................... 10
2.2.24 DC.Date.Modified .................................................................................................................................. 10
2.2.25 DC.Identifier .......................................................................................................................................... 10
2.2.26 DC.Format ............................................................................................................................................. 10
2.2.27 DC.Type ................................................................................................................................................. 11
2
HTML – AULA 1
Prof. Daniela Pires
HTML
A linguagem HTML (HyperText Markup Language) que significa linguagem de marcação de texto. Ou seja, ao se
escrever o texto em algumas partes, marca-se o mesmo com as TAGS, para que o navegador ao ler esse texto,
responda com funções nestas marcações, as TAGS, que irão marcar este texto, devem ser abertas e fechadas, ou
seja, se preencher com uma tag, após o uso deve se fechar a TAG.
XHTML
XHTML - eXtensible Hypertext Markup Language, é uma reformulação do HTML combinada com o XML. Basicamente
o XHTML é composto pelas tags do HTML e as regras do XML.
O XHTML consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as
marcações possuem sentido semântico para as máquinas. O HTML não consegue esta implementação. No entanto,
não existem muitas diferenças entre o HTML e o XHTML. Para verificar se uma página XHTML está bem construída, o
melhor método é validar o código através de uma aplicação Web disponibilizada pela organização W3C.
Portanto o XHTML pode ser interpretado por diversos dispositivos, como: celular, palm, tv, entre outros. Com isto
ganha-se em acessibilidade.
A estrutura acima indica que cada documento XHTML precisa obrigatoriamente ter:
doctype - tipo do documento
<html> - tag principal, ela marca o início e o final do documento.
<head> - tag usada para delimitar o cabeçalho do documento. Dentro dela outras tags de cabeçalho serão usadas,
como o title, meta, link, entre outros.
<title> - tag usada para indicar o título do documento.
<body> - tag usada para definir o corpo do documento. Dentro dela serão colocadas as tags que irão compor a nossa
página
Abaixo um exemplo de XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título da página </title>
</head>
<body>
</body>
</html>
3
HTML – AULA 1
Prof. Daniela Pires
O XHTML ao contrário do HTML, exige-se que feche todas as TAGS. Ou seja tags, como, <br>, em XHTML, escrevemse <br />. E ao contrário do HTML o XHTML, é case sensitive, ou seja, uma página XHTML, todas as TAGS, devem ser
escritas em caixa baixas, ou seja, letras minúsculas.
Segue abaixo alguns exemplos:
HTML
XHTML
<br>
<br />
<hr>
<hr />
<meta ...>
<meta ... />
<input ....>
<input .... />
Vamos então estudar as três partes do HTML.
1. HTML
É a TAG que engloba todo o código, todo o código HTML está entre <html> e </html> é a primeira parte do código.
Atributos
A tag html suporta o atributo xmlns, que é usado para definir o namespace XML do documento. Este namespace é
na verdade um endereço válido de onde contém o documento XML do W3C. Veja um exemplo:
<html xmlns="http://www.w3.org/1999/xhtml">
html é a tag
xmlns é o atributo
http://www.w3.org/1999/xhtml é o valor do atributo.
A tag html é suportada pelas versões Strict, Transitional e Frameset
2. HEAD
É a segunda parte do código, tudo que estiver dentro dele é de suma importância, não aparece na tela, porém os
spiders, robôs dos sites de buscas, enxerga essas informações e as indexa no Google.
Tudo que estiver entre <head> e </head> faz parte do cabeçalho
2.1. TITLE
É a tag mais importante do site, é nela que você colocará do que se trata a página, o nome da empresa, ou a palavrachave mais importante do seu site para que os buscadores o indexem.
4
HTML – AULA 1
Prof. Daniela Pires
EXEMPLO: <title>Webmaster Daniela Pires</title>
Uma página sem título é perdida e você fica no vazio. Devido ao Dreamweaver criar no título UNTITLED DOCUMENT,
e termos WEBDESIGNERS que não conhecem padrões WEB, existem mais de 52 milhões de páginas perdidas na
internet que seu conteúdo nunca será indexado na internet.
2.2METAS TAG
São importantíssimas, elas serão objetos ocultos dentro do seu site que irão identificar aos buscadores o que sua
página contém: Seguem os mesmos:
2.2.1 keywords
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. Porém se
passar de 200 frases pode deixar sua página lenta o Google ignora.
<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.
5
HTML – AULA 1
Prof. Daniela Pires
Pessoalmente, eu costumo incluir os termos no singular e no plural (site, sites). No caso de palavras acentuadas, eu
ignoro a acentuação ou utilizo os caracteres acentuados em HTML ("manutenção" fica "manutencao" ou
"manuten&ccedil;&atilde;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.
2.2.2 description
Uma ou duas frases que o buscador apresentará como um resumo do conteúdo do seu site:
Quando o GOOGLE retorna é resultado, o texto que aparece embaixo do título da sua página é o DESCRIPTION
<meta name="description" content=" Meta Tags - O que são e como utilizá-las">
Sozinhas, as meta tags não fazem milagres na divulgação do seu site: dê muita importância ao seu conteúdo em
primeiro lugar . É a dobradinha conteúdo bem apresentado + atualização constante que vai fazer com que o usuário
sempre volte. Um título coerente com o conteúdo e explicativo também ajuda muito.
Cuide também dos seus links: procure mostrar apenas links para páginas com assuntos relacionados ao seu
conteúdo, e tente ser linkado de volta. Em quanto mais páginas relevantes sobre o mesmo assunto seu site
aparecer, melhor ele estará no ranking dos buscadores.
Agora que você conhece o básico das meta tags e seu uso correto, ao invés de procurar métodos mirabolantes para
aumentar seu ranking, simplesmente dê mais atenção à elas e deixe os buscadores fazerem o resto.
2.2.3 Author
O nome do autor da página.
<meta name="author" content="André" />
2.2.4 Cache-Control
Esta tag é apenas reconhecida pelo http 1.1 e permite os seguintes valores:
Public: Os dados da página podem ser armazenados de forma compartilhada, isto é, será utilizado por diferentes
usuários de um mesmo browser (Notar que só é possível especificar usuários de browser no Firefox e Opera).
Private: É o contrário de public, o cache é armazenado para um específico usuário.
No-Cache: A página não é armazenada em Cache.
No-Store: É feito um cache temporário, a página não é arquivada.
6
HTML – AULA 1
Prof. Daniela Pires
Nota: A diretiva "cache-control:no-cache" tem a mesma função de "pragma:no-cache". O ideal quando se usa essa
instrução é utilizar ambas as formas caso não se saiba se o servidor é ou não compatível com o HTTP 1.1.
<meta http-equiv="cache-control" content="no-cache" />
2.2.5 Content-language
Declara a(s) linguagem(ns) natural(is) do documento. Pode ser usada pelos motores de busca para categorizar por
idioma.
<meta http-equiv="content-language" content="pt-br, en-US, fr" />
2.2.6 Content-type: Define o tipo de conteúdo da página e o tipo de codificação de caracteres. Pode-se dizer
que é a meta tag mais importante, sempre deve ser usada.
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
2.2.7 CopyRight
Como o nome já diz declara o direito autoral da página.
<meta name="copyright" content="© 2004 tex texin" />
2.2.8 Expires
A data e a hora depois dos quais o documento deve ser considerado como expirado. Uma data ilegal como, por
exemplo "0" é considerada como "agora".
Configurar "Expires" como "0" pode também ser usado para forçar uma nova checagem a cada visita do robô de
busca.
Nota: Alguns robôs de busca podem deletar um documento de seu banco de dados ao encontrá-lo expirado, outros
podem marcar uma revisita
<meta http-equiv="expires" content = "Mon, 22 jul 2006 11:12:01 GMT" />
2.2.9 Pragma no-cache
Faz com que o navegador não armazene a página em cache. Diferencia-se de "cache-control:no-cache" pelo fato de
ser reconhecida por todas as versões do HTTP.
<meta http-equiv="pragma" content="no-cache" />
2.2.10 Refresh
Especifica um tempo em segundos para o browser atualizar a página, opcionalmente pode-se adicionar uma URL
para a qual será redirecionado.
7
HTML – AULA 1
Prof. Daniela Pires
<meta http-equiv="refresh" content="15;url=http://www.thechessman.org" />
2.2.11 Robots
Especifica informações de indexação para os robôs de busca, suporta os seguintes valores:
All: Valor default, significa vazio, o robô de busca não recebe nenhuma informação.
Index: Os robôs de busca podem incluir a página normalmente.
Follow: Robôs podem indexar a página e ainda seguir os links para outras páginas que ela contém.
NoIndex: Os links podem ser seguidos, mas a página não é indexada.
NoFollow: A página é indexada, mas os links não são seguidos.
None: Os robôs podem ignorar a página.
NoArchive (Apenas Google): A página não é arquivada.
<meta name="robots" content="all" />
GoogleBoot
Em adição com a meta tag "Robots", o Google suporta um commando "GoogleBoot". Dizendo ao google que não
quer que a página seja indexada.
Nota: A página continuará a ser indexada pelos outros buscadores
<meta name="robots" content="all" />
2.2.12 Imagetoolbar
No internet explorer elimina aquela pequena barra de opções que aparece ao passarmos o mouse por cima de uma
imagem
<meta http-equiv="imagetoolbar" content="no" />
2.2.13 Generator
Indica o software usado para criar a página como forma de medir a popularidade do produto.
<meta name="generator" content="Dreamweaver 8" />
2.2.14 Revisit-After
Diz para os servidores proxy refazer o cache da página depois de um tempo específico.
Esta meta tag não faz com que os motores de busca voltem para sua página, eles fazem isso em períodos aleatórios.
<meta name="revisit-after" content="15 days" />
8
HTML – AULA 1
Prof. Daniela Pires
2.2.15 Rating
Esta tag funciona para classificar a página por censura, assim como no cinema, suporta os valores:
General: Para qualquer idade
14 years: Censura 14 anos
Mature: Para pessoas acima de 18 anos
<meta name="rating" content="general" />
2.2.16 Content-Script-Type
Define o tipo padrão da linguagem de script do documento.
<meta http-equiv="content-script-type" content="text/javascript" />
2.2.17 Content-Style-Type
Define o tipo padrão de linguagem para estilização do documento.
<meta http-equiv="content-style-type" content="text/css" />
2.2.16 DC.title
Desempenha a mesma função da tag "title", e deve conter o mesmo valor.
<meta name="DC.title" content="Mr.TheChessMan - Impressões Ideológicas" />
2.2.17 DC.Creator
Tem o mesmo papel da meta tag "Author"
<meta name="DC.creator " content="Gazola, André" />
2.2.18 DC.Creator.adress
E-mail para contato com o autor da página.
<meta name="DC.creator.address" [email protected]" />
2.2.19 DC.Suject
Tem a mesma função da meta "Keywords".
<meta name="DC.subject" content="metadata, metatags, dublin core,web design" />
2.2.20 DC.Description
Tem a mesma função da meta "Description".
9
HTML – AULA 1
Prof. Daniela Pires
<meta name="DC.description" content="..aqui vai a descrição da página.." />
2.2.21 DC.Publisher
Nome da organização que é responsável pelo documento.
<meta name="DC.publisher" content="Info Web Design" />
2.2.22 DC.Custodian
Normalmente, o webmaster responsável pela página.
<meta name="Custodian" content="Gazola, André" />
2.2.23 DC.Date.Created
Data de criação da página no formato AAAA-MM-DD.
<meta name="DC.date.created" content="2006-02-01" />
2.2.24 DC.Date.Modified
Última data de modificação do documento, importante para buscas por data.
<meta name="DC.date.modified" content="2006-02-01" />
2.2.25 DC.Identifier
URL do documento.
<meta name="DC.Identifier" content="http://www.thechessman.org">
2.2.26 DC.Format
Especifica o tipo de dados contidos no documento.
Text/html;
Text/xml;
Text/html;
Image/jpg;
Image/gif;
Video/quicktime;
<meta name="DC.format" content="text/xhtml" />
10
HTML – AULA 1
Prof. Daniela Pires
2.2.27 DC.Type
Text, Home Page, menu, image, vídeo, dados, software ou sound são alguns dos valores suportados.
<meta name="DC.type" content="text.homepage.institucional" />
11