DESENVOLVIMENTO WEB II - 7136
REVISÃO
Regras HTML e Dicas:
• Fechar sempre os TAGS fechados e compostos;
• NUNCA esquecer um sinal de “<” ou de “>”, no início ou no fim do
TAG;
• Não usar espaços no TAG (no interior dos sinais “<” e “>”).
EX: </ comando> ERRADO!!!
< com an do> - NUNCA!!!!
• Os agrupamentos de espaços colocados FORA dos TAGS serão
interpretados como apenas um espaço. Fora dos TAGS não há restrição
do uso dos espaços ( é usado para adicionar mais espaços);
• NOMES DOS ARQUIVOS (inclusive extensão “.html” ou “.htm”) –
Sempre em minúsculas e sem acentos e caracteres especiais.
Algumas dicas importantes para o seu sucesso na Web:
• Verifique suas páginas com diferentes navegadores e em diferentes
plataformas para assegurar que você terá uma experiência de
visualização consistente;
• Como alguns usuários da WEB ainda se conectam a velocidades baixas,
verifique se suas páginas podem ser visualizadas com estes modems;
• Revise a grafia e a gramática antes de publicar a sua página (peça que
outra pessoa a leia). Verifique todos os links entre as páginas. Esta dica
é simples mas muitas pessoas esquecem dela e publicam péssimos
trabalhos;
• Não coloque informações do tipo “Este site está em processo de
criação”
(geralmente
acompanhada
de
sinais
amarelos),
pois
praticamente todos os sites da Web estão em criação e em
desenvolvimento. É preferível não colocar nada a colocar uma página
com um aviso deste tipo;
-3-
DESENVOLVIMENTO WEB II - 7136
• Peça a opinião de outras pessoas antes de publicar o seu site, o olhar
crítico de alguém pode detectar erros que não foram percebidos por
você.
Observações em relação aos nomes dos arquivos:
• As extensões ".html" ou ".htm" são importantes quando o servidor Web
está identificando o arquivo. Usaremos como convenção para os
nossos trabalhos a extensão ".html";
• Os nomes devem iniciar com uma letra obrigatoriamente;
• Pode-se utilizar caracteres como "-" e "_";
• Evite utilizar "ç", caracteres especiais e letras acentuadas em nomes de
arquivos;
• Procure usar nomes significativos, que remetam ao conteúdo do
arquivo.
Para edição dos arquivos .html, utilizaremos o programa PHP Editor
Versão 2.22. PHP Editor é um editor freeware e totalmente em português
destinado a edição de páginas PHP e HTML. Vamos salvar nossos arquivos de
exemplo na pasta c:/wamp/www/dw2
4.3 - Estrutura básica de uma página
<html>
<head>
<title>Titulo da Página</title>
</head>
<body>
<!-- Corpo da Página -->
</body>
</html>
Um documento HTML básico é composto de duas partes:
-4-
DESENVOLVIMENTO WEB II - 7136
• A seção de cabeçalho descritiva;
• O corpo do conteúdo.
XHTML:
XHTML é a sigla em inglês para EXtensible HyperText Markup
Language que em tradução livre resulta em Linguagem Extensível para
Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e
nada mais é do que uma HTML "pura, clara e limpa".
Vantagens de se usar XHTML:
Enumeram-se várias e efetivas vantagens de se usar XHTML nos novos
documentos web produzidos ou se migrar os documentos atuais escritos em
HTML. E, dentre elas destaca-se em primeiro plano a compatibilidade da
linguagem XHTML com as futuras aplicações de usuários, garantindo desde já
que as criações XHTML conservar-se-ão estáveis por longos anos. A tendência
é a de que futuras versões de navegadores e agentes de usuários em geral,
deixem de suportar elementos e atributos já em desuso ("deprecated")
segundo as Recomendações do W3C1, bem como antigos e ultrapassados
esquemas e esboços da HTML.
XHTML é a linguagem da web do futuro desde já a disposição de
projetistas e desenvolvedores web.
XHTML é um código consistente que dispensa uso de "truques" e
"hacks" para contornar "bugs".
Editar um código XHTML existente é uma tarefa bem simples por se
tratar de uma escrita limpa e evidente.
1
O World Wide Web Consortium (W3C) é a principal organização de padronização da World Wide Web. Consiste em um
consórcio internacional com quase 400 membros (agrega empresas, órgãos governamentais e organizações independentes)
com a finalidade de estabelecer padrões para a criação e a interpretação de conteúdos para a Web.
-5-
DESENVOLVIMENTO WEB II - 7136
O tempo de carregamento de uma página XHTML é mais rápido, pois os
navegadores têm a interpretar uma página limpa sem ter que decidir sobre
renderização de erros de código.
Uma página XHTML é mais acessível aos navegadores e às aplicações de
usuário em geral, incrementando a interoperabilidade e a portabilidade dos
documentos web.
Uma página XHTML é totalmente compatível com todas as aplicações
HTML antigas e já ultrapassadas.
XHTML é um "Padrão Web" (Web Standard)
XHTML é uma linguagem estável, oficialmente especificada pelo W3C,
tendo sido projetada e revisada pelos seus membros e é um "Padrão Web".
As diferenças entre XHTML e HTML:
As principais diferenças são:
1 - Todos os tags devem ser escritos em letras minúsculas:
Errado:
<DIV><P>Aqui um texto</P></DIV>
Certo:
<div><p>Aqui um texto</p></div>
2 - Os tags devem estar convenientemente aninhados:
Errado:
<div><em><p>Aqui um texto negrito</em></p></div>
Certo:
<div><em><p>Aqui um texto negrito</p></em></div>
-6-
DESENVOLVIMENTO WEB II - 7136
3 - Os documentos devem ser bem formados:
Todos os elementos XHTML devem estar corretamente aninhados
dentro do elemento raiz <html>. A estrutura básica do documento deve ser
conforme abaixo:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
4 - O uso de tags de fechamento é obrigatório:
Em HTML é permitido, para determinados elementos, omitir-se o tag de
fechamento. XHTML não permite omissão de qualquer tag de fechamento.
Errado:
<p>Um parágrafo.<p>Outro parágrafo.
Certo:
<p>Um parágrafo.</p><p>Outro parágrafo.</p>
5 - Elementos vazios devem ser fechados:
Errado:
<br><hr><img src="imagem.gif" alt="minha imagem">
Certo:
<br /><hr /><img src="imagem.gif" alt="minhaimagem" />
6 - Sintaxe para atributos:
Nomes de atributos: Assim como os tags, os atributos também são
sensíveis ao tamanho de caixa e então deve-se escrever nomes de atributos
em minúsculas:
-7-
DESENVOLVIMENTO WEB II - 7136
Errado:
<td ROWSPAN="3">
Certo:
<td rowspan="3">
Valores de atributos: Os valores de atributos devem estar entre
"aspas duplas " ou 'aspas simples':
Errado:
<td rowspan=3>
Certo:
<td rowspan="3"> ou <td rowspan='3'>
Valores dos atributos: Todos os atributos devem receber um valor:
Errado:
<input checked />
Certo:
<input checked="checked" />
Os atributos id e name: O HTML define o atributo name para os
elementos a, form, frame, iframe, img, input e map. O HTML também
introduziu o atributo id. Ambos atributos foram projetados para serem usados
como identificadores. Documentos XHTML compatíveis com XML e bem
estruturados, DEVEM usar o atributo id e não name ao definir identificadores
para os elementos listados acima. Em XHTML, o atributo name destes
elementos está formalmente em desuso e possivelmente será excluido nas
versões futuras de XHTML.
-8-
DESENVOLVIMENTO WEB II - 7136
Errado:
<img src="imagem.gif" name="minha_imagem" />
Certo:
<img src="imagem.gif" id="minha_imagem" />
Nota: Por razões de compatibilidade com navegadores antigos você pode usar
ambos os atributos como mostrado a seguir:
<img src="imagem.gif" id="minha_imagem" name="minha_imagem" />
NOVIDADE:
Documet Type
Não existe um só tipo de HTML, atualmente existem vários: HTML 4.01
Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, e muitos outros. Cada um
destes tipos está definido em especificação própria no W3C, mas também está
definido em linguagem de máquina especificando a estrutura legal, os
elementos e os atributos próprios do tipo de HTML.
Uma definição assim é chamada de "Document Type Definition",
(Definição do Tipo de Documento) ou simplesmente DTD.
Ferramentas para processar documentos, tais como WEB Browsers,
precisam saber qual é a DTD que o documento (X)HTML usa: esta é razão
porque documentos (X)HTML precisam conter logo no seu início uma
declaração DTD tal como abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Uma declaração DTD usualmente é chamada de "Doctype".
Por que especificar um doctype?
-9-
DESENVOLVIMENTO WEB II - 7136
Porque ele define qual é a versão do (X)HTML que o documento está
usando e esta é uma informação fundamental para que os browsers
processem corretamente o documento.
Por exemplo: ao especificar o doctype, o documento estará apto a ser
processado por ferramentas tais como o Validador de marcação para checar a
sintaxe do seu (X)HTML (e descobrir eventuais erros que prejudicariam a
correta renderização em variados browsers. Entende-se que renderização é o
processo pelo qual pode-se obter o produto final de um processamento digital
qualquer). Estas ferramentas não funcionam se não conhecerem o tipo de
documento que estão processando.
Porém, o mais importante de uma declaração de doctype é que uma
família considerável de browsers não ficará tentando resolver ou "adivinhar"
como renderizar o código e ao contrário entrará logo em modo de
parseamento "standard", no qual o entendimento (e em consequência a
apresentação) do documento é não só mais rápida como também isenta de
uma má apresentação ao qual estão sujeitos os documentos sem uma
declaração de Doctype.
São três os tipos de DOCTYPE para HTML e XHTML:
• Strict
• Transitional
• Frameset
Strict: este tipo é usado quando você fez um código 100% XHTML,
sem erros. Deve ser escrito assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 10 -
DESENVOLVIMENTO WEB II - 7136
Transitional: este é o modo mais usado. Você o usa quando está
começando a migrar do nosso amigo HTML para o poderoso XHTML. Sua
sintaxe é:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Frameset: é usado quando você está utilizando frames em seu site.
Escreve-se assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Esta informação deve ser adicionada na primeira linha do seu arquivo
HTML, antes do tag <html>. Veja o exemplo abaixo:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html>
<head>
<title>Titulo da Página</title>
</head>
<body>
<!-- Corpo da Página -->
</body>
</html>
- 11 -
DESENVOLVIMENTO WEB II - 7136
Mata Tags - O que são e como utilizá-las:
Meta tags são linhas de código HTML ou "etiquetas" que, entre outras
coisas, descrevem o conteúdo do seu site para os buscadores. É nelas que
você vai inserir as palavras-chave que facilitarão a vida do usuário na hora de
te encontrar, por exemplo. Por meio delas, você pode também "assinar" seu
site, declarando sua autoria sobre o código fonte.
Cada vez mais os buscadores levam em consideração a qualidade do
conteúdo nos resultados de pesquisa, e por isso simplesmente adicionar meta
tags no código fonte da sua página não vai melhorar o posicionamento dela.
Porém, as meta tags ainda tem seu espaço se utilizadas corretamente.
Como utilizar as meta tags?
As meta tags devem ser incluídas no seu código HTML, dentro do tag
<head>, como mostra o exemplo a seguir:
<html>
<head>
<title> Aprendendo sobre as meta tags </title>
<meta name="author" content="Marcos Dalamura">
<meta name="description" content="Meta Tags - O
que são e como utilizá-las">
<meta
name="keywords"
content="sites,
web,
desenvolvimento">
</head>
...
Vamos entender melhor as instruções "menos óbvias", isto é, keywords
e description:
- 12 -
DESENVOLVIMENTO WEB II - 7136
keywords
Nesta tag você deve incluir uma quantidade de palavras que se referem
ao conteúdo da página. Mantenha o limite de aproximadamente 150
caracteres. 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. 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.
<meta name="keywords" content="sites, web,
desenvolvimento, html, design">
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ção"). Vide http://www.lsi.usp.br/~help/html/iso.html
Infelizmente, alguns desenvolvedores fizeram mal uso deste recurso no
passado, o que faz com que alguns robots e spiders não dêem muita atenção
às meta tags keywords. Se não têm mais tanta influência nos resultados dos
principais buscadores, as meta tags keywords ainda podem ajudar a
categorizar o conteúdo da sua página. Por isso, sempre use palavras-chave
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" sairá rapidamente da página. Além disso,
os buscadores melhoram seus algoritmos de busca a cada dia, e um
truquezinho que aparentemente vai te ajudar pode atrapalhar e muito.
description
- 13 -
DESENVOLVIMENTO WEB II - 7136
Uma ou duas frases que o buscador apresentará como um resumo do
conteúdo do seu site. Procure manter um limite de aproximadamente 90
caracteres.
<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.
Cuide também dos seus links: procure inserir apenas endereços 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.
Escondendo seu site dos buscadores
Hoje em dia é um pouco obsoleto utilizar as meta tags para esconder
determinadas páginas do seu site dos buscadores. Para melhores resultados,
você pode experimentar o uso de um arquivo robots.txt (link em inglês).
Tão importante quanto conhecer a utilidade da tag keywords é saber
usar a tag robots. A função desta é informar aos buscadores se devem indexar
sua página ou não. Parece contraditório falar sobre isso, mas, na verdade,
bloquear seu site pode ter lá suas vantagens.
Quando você utiliza pop-ups ou iframes para mostrar o conteúdo do seu
site, por exemplo, não é interessante que o buscador indexe essas páginas,
afinal, se elas forem acessadas individualmente, não vão significar nada e não
trarão visitação relevante ao seu site. Também pode ser interessante não
indexar seu site quando o conteúdo é restrito a um grupo de pessoas e não
- 14 -
DESENVOLVIMENTO WEB II - 7136
precisa de divulgação ou quando você quer fazer um blog mais reservado, por
exemplo. Nestes casos, mesmo que outras pessoas façam links para o seu
site, ele não aparecerá em nenhuma busca (na verdade, isso pode depender
de critérios internos do buscador).
Os valores possíveis para esta tag são:
<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">
Aqui, os valores "index" e "noindex" se referem ao tratamento da página
inicial: se o buscador deve ou não incluí-la nos resultados, respectivamente.
Já os valores "follow" e "nofollow" se referem aos links da página inicial,
se eles devem ser visitados e indexados ou não.
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">
A instrução acima não indexa a página inicial, mas indexa as páginas
nela referenciadas (links).
<meta name="robots" content="index,nofollow">
A instrução anterior indexa a página inicial, mas nenhum link existente
nela.
- 15 -
DESENVOLVIMENTO WEB II - 7136
<meta name="robots" content="noindex,nofollow">
Por fim, a instrução acima não indexa nem a página inicial e nem seus
links.
Portanto, se você quiser evitar que os sites de busca encontrem seu
site, use a última opção. Porém, se você quiser que apenas o Google não
encontre seu site ou se quiser remover uma página dos seus resultados de
busca a partir da próxima varredura, pode utilizar a seguinte tag:
<meta name="googlebot" content="noindex,nofollow">
A maioria dos buscadores armazena uma cópia da sua página em cache,
para otimizar a busca. Para evitar isso, você pode utilizar a tag a seguir:
<meta name="robots" content="noarchive">
Todavia, lembre-se que além de acelerar a busca, armazenar uma cópia
em cache tem a finalidade de disponibilizar o resultado ao usuário caso seu
site esteja passando por algum problema técnico. Use esta tag somente se o
conteúdo do seu site for muito específico quanto a essa necessidade.
Mais do que divulgar seu site nos buscadores
As meta tags não servem só para divulgar seu conteúdo. Basicamente, a
função delas é fornecer informações adicionais sobre seu site. Vamos
conhecer melhor algumas meta tags interessantes.
content-language
Especifica a língua primária da página. Útil para ajudar o buscador a
classificar seu site no idioma apropriado, orientar os navegadores a exibir
- 16 -
DESENVOLVIMENTO WEB II - 7136
acentuação e caracteres especiais corretamente, e para facilitar o uso de
corretores ortográficos. Alguns valores possíveis:
• pt Português
• pt-br Português do Brasil
• en Inglês
• en-us Inglês dos EUA
• en-gb Inglês Britânico
• fr Francês
• de Alemão
• es Espanhol
• it Italiano
• ru Russo
• zh Chinês
• ja Japonês
Um exemplo usando o valor "pt-br":
<meta http-equiv="content-language" content="pt-br">
content-type
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:
- 17 -
DESENVOLVIMENTO WEB II - 7136
text/html define que o conteúdo é um texto em linguagem HTML. Se
você desenvolve sites em XHTML ou XML, deverá aplicar 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.
author
Por meio das meta tags, você também pode declarar sua autoria sobre
a página, "assinando" seu código fonte:
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="Marcos Dalamura">
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 ajudar a provar que ele foi desenvolvido por
você.
reply-to
Especifica um endereço de e-mail para entrar em contato com o
responsável pelo site.
<meta name="reply-to" content="[email protected]">
- 18 -
DESENVOLVIMENTO WEB II - 7136
generator
Alguma vez você já reparou que quando edita uma página HTML feita
no Word, muitas vezes é o programa que a gerou que abre para edição, e não
o Bloco de Notas ou seu editor não-visual padrão? Isso é por causa da meta
tag generator, que especifica o programa que construiu a página:
<meta name="generator" content="Microsoft Word">
É assim que o Sistema Operacional sabe que editor utilizar e que ícone
mostrar ao exibir um arquivo .htm ou .html em uma pasta.
Redirecionando o visitante para outra página
Alguma vez você já deve ter visitado um site que mudou de endereço e
que exibe uma mensagem do tipo:
Você será redirecionado para um novo site em 5 segundos.
Se não quiser aguardar, clique aqui.
Esse redirecionamento pode ser feito com meta tag, por meio de uma
única linha:
<meta http-equiv="refresh" content=" 5
;url=http://www.novosite.com/">
Ou seja, depois de 5 segundos, o navegador será redirecionado para o
endereço www.novosite.com.
Essa mesma tag é utilizada para atualizar automaticamente uma página
dinâmica, como a home page de um portal ou a sessão de notícias de um site,
por exemplo. Neste caso, o intervalo de tempo em segundos deve ser bem
maior e a URL deve ser o endereço do próprio site a ser atualizado.
<meta http-equiv="refresh"
content="120;url=http://www.seusite.com/">
- 19 -
DESENVOLVIMENTO WEB II - 7136
Lembre-se apenas de utilizar esse recurso com cautela, pois uma página
que é atualizada automaticamente pode interromper a atividade do usuário,
deixando-o irritado.
As meta tags são interessantes para o seu site, mas não são o mais
importante. Você deve priorizar a disponibilização de bom conteúdo e, claro,
evitar enganar ou confundir seu usuário. Acreditar que somente um bom
trabalho em meta tags será o suficiente para o seu site ser bem indexado é
um erro, mesmo porque, conforme já informado, os buscadores estão cada
vez mais preparados para identificar "truques". Por isso, utilize meta tags, mas
procure também trabalhar com boas práticas.
Exercício: Monte um arquivo com o nome revisao.html contendo o seu
horário de aula neste semestre, conforme exemplo abaixo:
Obs:
01 – Escreva seu arquivo utilizando o padrão XHTML;
02 – Salve seu arquivo na pasta c:/wamp/www/dw2
03 – Utilize o DTD Trasitional e coloque o título da página como “Meu Horário”
04 – Utilize a meta tag author colocando o seu nome como autor da página
- 20 -
DESENVOLVIMENTO WEB II - 7136
05 – Utilize a meta tag description com os seguintes dizeres: “Horário do 4º
Período de Sistemas de Informação - UNIVERSO”
06 – Utilize a meta tag keywords com os seguintes dizeres: “universo,
horário, sistemas de informação, quarto período”
07 – Utilize a meta tag robots de forma que os buscadores não indexem a
página os links contidos na mesma
08 – Utilize a meta tag content-language especificando a língua primária da
página como Português Brasil
09 – Utilize a meta tag reply-to informando seu e-mail
10 – Utilizando a meta tag refresh redirecione a sua página, após 10
segundos,
para
o
site
da
Universo
Juiz
de
Fora
(http://www.universo.edu.br/portal/juiz-de-fora/)
11 – Utilize Folhas de Estilo (CSS), método interno, para configuar a página de
acordo com as características abaixo:
• Família da Fonte de toda a página: arial, verdana, sans-serif
• Alinhamento do texto de toda a página: centralizado
• Todo texto da página, inclusive da tabela, em negrito
• Cor de fundo das linhas da tabela: #CCCCCC
- 21 -
Download
