INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RIO GRANDE DO NORTE
CAMPUS SÃO GONÇALO DO AMARANTE
PROGRAMAÇÃO WEB
#Fundamentos de uma página
web
Eliezio Soares
elieziosoares@[Link]
Aula de Hoje
Criando documentos XHTML
Entendendo definições de tipos de documentos
Usando tags meta
Anexando documentos externos
Trabalhando com a seção body
Usando CSS como fundo de página web
Comentando o trabalho
TUDO COM O QUE PRECISAMOS LIDAR ANTES DE LAYOUT
E CONTEÚDO.
Padrões de Documentos - HTML
HTML
Início de trabalho simples:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Padrões de Documentos - XHTML
XHTML
Um documento inicial pode ser assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
<html xmlns=[Link] xml:lang=“em” lang=“em”>
<head>
<meta http-equiv=“content-type" content=“text/html;
charset=utf-8”>
<title></title>
</head>
<body>
</body>
</html>
Padrões de Documentos - HTML
Tag de início HTML
Namespace com indicação da língua padrão.
<html xmlns=[Link] xml:lang=“em” lang=“em”>
HTML é um xml e cada tag pode ter diversos
significados, por isso a definição de namespace
(xmlns).
Indica a linguagem padrão que é utilizada no
corpo do documento.
Isso pode ajudar a dispositivos interpretarem
corretamente o conteúdo, como um leitor de tela, por
exemplo.
Padrões de Documentos - DOCTYPE
DOCTYPE
Determina qual DTD (Document Type Definition) o
documento segue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
O DTD indica ao browser qual markup você está
utilizando (Isso permite que o browser o
interprete corretamente).
Deve ser o primeiro elemento de uma página.
DOCTYPE – XHTML Strict
DOCTYPE
XHTML Strict;
XHTML Transitional;
XHTML Frameset;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]
O DTD XHTML Strict não permite o uso de markup de
apresentação ou elementos ultrapassados.
Força um código mais puro e rigoroso.
DOCTYPE – XHTML Transitional
DOCTYPE
XHTML Strict;
XHTML Transitional;
XHTML Frameset;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
O DTD XHTML Transitional é mais flexível.
Permite o uso de tags antigas.
Ainda que se utilize markup strict o DTD
Transitional garante uma boa interpretação dos
browsers.
DOCTYPE – XHTML Frameset
DOCTYPE
XHTML Strict;
XHTML Transitional;
XHTML Frameset;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]
O DTD XHTML Frameset deve ser utilizado por
frames.
As páginas individuais dentro de um frameset exigem um
DTD Frameset.
Doctype HTML 5
No HTML5 a inserção do Doctype foi simplificada, e a
responsabilidade de buscar as definições da especificação
fica por conta do próprio navegador:
É na tag <html> que declaramos o idioma
principal do documento, através do atributo
lang.
<!DOCTYPE html>
<html lang=“pt-br">
Declaração XML
Única exceção aceita ao DOCTYPE.
Pode ser o primeiro elemento da página
<?xml version=“1.0” encoding=“utf-8”>
Version:
Indica qual versão XML está sendo utilizada.
Encoding:
Indica a codificação utilizada.
Pode ser perfeitamente substituída por:
<meta http-equiv=“content-type" content=“text/html;
charset=utf-8”/>
<meta charset="UTF-8">
Seção HEAD
Contém informações sobre o documento.
A maioria dessas informações são transparentes
para os usuários.
É um container para as demais tags.
Título <title></title>
Tags Meta
Anexos <link/>
<title> Título </title>
Os títulos são adicionados com a tag <title>.
Título <title></title>
São mostrados na parte superior da janela do browser:
Mecanismos de busca
O título é o que mais se destaca nos resultados.
Mantenha-os claros e concisos.
Boas práticas:
Utilizar o nome da organização, ou aplicação.
Utilizar o serviço utilizado após o nome da organização:
Organização - Serviço
Tags Meta
Tags meta são utilizadas para descrever
informações do documento.
Os mecanismos de busca hoje em dia já não
consideram exclusivamente as tags meta, pois
analisam todo o conteúdo das páginas.
Declaração dentro do cabeçalho.
É necessário declarar o tipo de conteúdo e o
conjunto de caracteres.
Declarando o tipo de conteúdo
Conteúdo
Mime types: Utilizado para definir o conteúdo de
um documento.
Para HTML é utilizado text/html.
Codificação
ISO-8859-1; ISO-8859-2; ISO-8859-3; ISO-8859-4;
ISO-8859-5; ISO-8859-6; ISO-8859-7; ISO-8859-8;
ISO-8859-9; ISO-8859-10; UTF-8;
<head>
<meta http-equiv=“content-type" content=“text/html;
charset=utf-8”/>
<title></title>
</head>
Declarando o tipo de conteúdo – HTML5
Em HTML5 menos código é exigido.
A descrição da configuração de caracteres
foi simplificada.
<meta charset="UTF-8">
Palavras-chave
Keywords (Palavras-chave):
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Informa palavras pelas quais os sistemas de busca
possam relacionar a busca do usuário com seu site.
Descrição
Description (Descrição):
<meta name="description" content=“Uma breve descrição sobre o site…">
Esse conteúdo é exibido na página de resultados de
alguns mecanismos de buscas juntamente com o título
das páginas.
A maioria desses mecanismos exibe no máximo 200
caracteres.
Revisite
Revisit-After (Revisite-Depois):
<meta name="revisit-after" content="15 days" />
Indica quantas vezes as máquinas de busca devem
retornar (útil para sites atualizados
frequentemente).
Robôs
Robots (Robôs):
<meta name="robots" content=“index” />
Indica aos motores de busca se a página atual deve ser
indexada ou não.
Valores:
Index: Os robôs de busca podem incluir a página
normalmente.
Noindex e none: Bloqueiam a indexação.
Follow: Indica que os motores devem seguir os links da
página.
NoFollow: Indica que os motores não devem seguir os links
da página.
Os valores podem ser combinados.
Autor
Author (Autor):
<meta name=“Author" content=“Redes 4M [Link]” />
Indica a autoria do projeto e normalmente um link
que leve ao criador.
A tag LINK e o CSS
A tag link especifica uma relação entre o
documento atual e o documento a qual está
sendo ligado.
<link rel="stylesheet" type="text/css" href="[Link]“ media=“all”>
Os atributos utilizados são:
Rel: Define a relação do documento pai com o alvo.
Href: A localização do arquivo alvo.
Type: O tipo MIME do documento alvo.
Media: A media alvo do documento alvo.
Pode ser definido um para cada tipo de saída, como
impressora, por exemplo (“screen”, “print”).
A tag LINK e o Favicon
Os favicons são pequenos ícones observados na
barra de endereço dos navegadores.
Rel: “shortcut icon”
Type: “image/x-icon”; “image/png”;
<link rel="shortcut icon" type="image/x-icon" href=“[Link]“>
Atividade
1. Escreva uma página web utilizando as
definições dadas nesta aula:
1. Declaração XML
2. Doctype
3. Tags Meta
1. Codificação
2. Palavras-chave
3. Descrição
4. Autor
5. Revisite
6. Robô
4. Arquivo css externo
5. Favicon
Hello World...
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p>Programação Web</p>
</body>
</html>
