Introdução
à
Tecnologia
Web
HTML
­
HyperText
Markup
Language
XHTML
–
eXtensible
HyperText
Markup
Language
Elementos
da
Seção
do
Cabeçalho
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Elementos
da
Seção
do
Cabeçalho
Índice
1 – SEÇÃO DE CABEÇALHO: Tag <head> ..................................................................... 2
Atributo: Não possui. ............................................................................................ 2
1.1 – Titulo da página: Tag <title> ........................................................................ 2
Atributo: Não possui. ......................................................................................... 2
1.2 – Meta informações: Tag <meta>.................................................................... 2
Atributo: name (name/nome) ............................................................................. 2
Atributo: http-equiv (HTTP header/cabeçalho HTTP) ............................................ 2
Atributo: content (content/conteúdo).................................................................. 3
1.3 – Inclusão de arquivos externos: tag <link> ..................................................... 3
Atributo: rel (relationship/relacionamento) .......................................................... 3
Atributo: type (type/tipo) ................................................................................... 3
Atributo: href (HTTP Reference/referência HTTP) ................................................ 3
1.4 – Folha de estilos incorporada: Tag <style> ..................................................... 3
Atributo: type (type/tipo) ................................................................................... 3
1.5 – Definição de script: tag <script> ................................................................... 4
Atributo: type (type/tipo) ................................................................................... 4
Atributo: src (source/fonte) ................................................................................ 4
Diferenças entre HTML 4.01 e XHTML 1.0 deste capítulo................................................ 5
Referências Bibliográficas............................................................................................. 5
1
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
1
–
SEÇÃO
DE
CABEÇALHO:
Tag
<head>
Contém informações lógicas sobre o documento (título da página, descrições, conjunto de
caracteres, scripts, folhas de estilos, links para arquivos externos de scripts e folhas de estilos, etc). Com
exceção do título da página, as demais informações não são exibidas ao usuário. Trata-se da primeira
seção do documento.
Atributo:
Não
possui.
Exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
outras tags com informações lógicas…
</head>
<body>
conteúdo da página...
</body>
</html>
As informações lógicas presentes na seção do cabeçalho são criadas a partir das tags a seguir:
1.1
–
Titulo
da
página:
Tag
<title>
Define o nome da página que aparecerá na barra de titulo da janela do navegador. Muitos
browsers utilizam o título como forma de referenciar a página em uma lista de links úteis criadas pelo
usuário (conhecida como "Bookmarks" ou "Favorites"). O uso do título é recomendado pela W3C, por
auxiliar a indexação da página em bancos de dados de motores de busca como Google. Não confunda
o título da página com o nome do arquivo gravado em disco.
Atributo:
Não
possui.
Exemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> SOLID – Multimedia Center </title>
</head>
<body
conteúdo da página...
</body>
</html>
1.2
–
Meta
informações:
Tag
<meta>
Define informações especiais que podem auxiliar o navegador na interpretação do código-fonte
e apresentação do conteúdo, como também informações apenas para controle de desenvolvimento.
Atributo:
name
(name/nome)
Especifica um nome ao qual um determinado valor será associado. Usado para definir o nome
de informações variadas como palavras-chave (keywords), nome do autor (author), descrição do
site (description) etc.
Atributo:
http­equiv
(HTTP
header/cabeçalho
HTTP)
Define um cabeçalho HTTP compreendido pelo browser, que pode mudar o comportamento
do browser/página. Usado para por exemplo, forçar a página a se atualizar depois de um tempo
ou redirecionar para outro endereço (refresh), definir o tipo de conteúdo/conjunto de
caracteres usado no texto do documento (content-type/charset : ISO8859-1 ou TF-8), dentre
outras.
2
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Atributo:
content
(content/conteúdo)
Especifica o valor/conteúdo da meta informação descrita nos atributos name ou http-equiv.
As meta informações mais comuns são apresentadas abaixo junto com os atributos:
Exemplos de meta informações em HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Contabilidade Online </title>
<meta name="description" content="Consultoria em Contabilidade">
<meta name="keywords" content="Declaração de Imposto, Contabilidade, Recursos Humanos">
<meta name="author" content="Jorge Clooney">
<meta http-equiv="refresh" content="2; URL=http://www.cont.com.br/novosite/index.htm">
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
</head>
<body>
...
</body>
</html>
1.3
–
Inclusão
de
arquivos
externos:
tag
<link>
Define uma ligação entre o documento atual e um recurso externo. Usado para incluir folhas de
estilos CSS no documento atual, mostrar o ícone na barra de endereços, etc.
Atributo:
rel
(relationship/relacionamento)
Especifica a relação entre o documento atual (html) e o arquivo incluído pela ligação.
Atributo:
type
(type/tipo)
Especifica o tipo MIME (12) do arquivo incluído pela ligação.
Atributo:
href
(HTTP
Reference/referência
HTTP)
Especifica a URL (endereço) do recurso incluído. Pode ser absoluto ou relativo.
Exemplos de inclusão de arquivos em HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Contabilidade Online </title>
<link rel="stylesheet" type="text/css" href="estilos/folha_de_estilos.css">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
...
</body>
</html>
1.4
–
Folha
de
estilos
incorporada:
Tag
<style>
Trecho que define informações sobre o estilo usado pelos elementos html do documento atual.
O estilo define como os elementos devem ser renderizados pelo browser (cor, tamanho, posição,
efeitos, etc). O trecho de código inserido dentro das tags de estilo são escritos na sintaxe da linguagem
CSS (Cascading Style Sheets/Folhas de Estilos em Cascata).
Atributo:
type
(type/tipo)
Especifica o tipo MIME do trecho de código escrito no local. Atualmente o único tipo aceito
para criação de estilos é text/css, pois é a única linguagem atual criada para esse fim.
Exemplo de escrita de folha de estilo incorporada em HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
3
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
<head>
<title>Contabilidade Online </title>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>Contabilidade</h1>
<p>Faça uma cotação de IR online</p>
</body>
</html>
1.5
–
Definição
de
script:
tag
<script>
Usado para delimitar um trecho de código de script client-side, ou para incluir um arquivo
externo que contenha um código script para ser usado pelo documento. OBS: Esta tag pode
estar na seção de cabeçalho como também na seção de corpo do documento html.
Atributo:
type
(type/tipo)
Especifica o tipo MIME do arquivo incluído ou escrito no local.
Atributo:
src
(source/fonte)
Especifica a URL (endereço) do código incluído. Usado somente na inclusão de arquivo
externo. O endereço pode ser absoluto ou relativo. O arquivo escrito em JavaScript, por
exemplo, tem extensão .js.
Exemplo de uso de script externo (JavaScript) em HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Contabilidade Online </title>
<script type="text/javascript" src="http://www.cont.com.br/libs/code.js"></script>
</head>
<body>
...
</body>
</html>
Exemplos de uso de script interno (JavaScript) em HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Contabilidade Online </title>
</head>
<body>
<script type="text/javascript">
document.write("Bem vindo ao nosso site!")
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Contabilidade Online </title>
<script type="text/javascript">
function valida() {
...
window.alert("Dados enviados com sucesso!")
</script>
</head>
<body>
...
</body>
</html>
Podem estar presentes na seção do corpo ou do cabeçalho, dependendo do objetivo do script.
4
Profª
MSc.
Elizabete
Munzlinger
www.elizabete.com.br
Diferenças
entre
HTML
4.01
e
XHTML
1.0
deste
capítulo
1
–
Em
XHTML
as
tags
vazias
meta
e
link
devem
ter
marca
de
fim
(barra):
<meta name=”author” content=”Joao” />
<link rel="stylesheet" type="text/css" href="theme.css" />


Abandone
1
–
Em
versões
HTML
4.0
e
anteriores,
a
tag
script
usa
o
atributo
language
para
definir
a
linguagem
script
usada.
Ao
invés
disto,
use
o
atributo
type.
<script language=”javascript”>

<script type=”text/javascript”>

2
–
Em
versões
HTML
4.0
e
anteriores,
a
tag
body
tem
atributos
de
formatação
como
bgcolor,
background,
bgproperties,
text,
link,
alink,
vlink,
leftmargin,
topmargin.
Todas
estas
formatações
já
estão
depreciadas
e
devem
ser
usadas
através
de
estilos
CSS.
<body bgcolor="white" background="imagens/fundo.gif" bgproperties="fixed" text="blue"
link="yellow" alink="red" vlink="cyan" leftmargin="20"
topmargin="20">

Se
usar
pelo
menos
1
destes
atributos
mude
o
DOCTYPE
do
seu
HTML
para
transitional
ou
frameset.
Estes
atributos
não
são
vistos
neste
curso
pois
já
estão
em
desuso,
mas
caso
queira
aprender,
deverá
ser
por
sua
conta

).
Referências
Bibliográficas
1.
MACEDO,
Marcelo
da
Silva.
Construindo
sites
adotando
padrões
Web.
Rio
de
Janeiro:
Ciência
Moderna,
2004.
2. MARCONDES,
Christian
Alfim.
HTML
fundamental
4.0.
São
Paulo:
Érica,
2005.
3. CARDOSO,
Márdel.
Desenvolvimento
web
para
o
ensino
superior.
Rio
de
Janeiro:
Axcel
Books,
2004.
4. W3C.
Word
Wide
Web
Consortium.
Disponível
online
em:
[http://www.w3.org/]
5. HTML.
HTML
Working
Group.
Disponível
online
em:
[http://www.w3.org/html/wg/]
6. HTML.
W3C
Recomendation:
HTML
4.01
Specification.
Disponível
online
em:
[http://www.w3.org/TR/html4/]
7. XHTML.
W3C
Recomendation:
XHTML
1.0
The
Extensible
HyperText
Markup
Language
(Second
Edition).
A
Reformulation
of
HTML
4
in
XML
1.0.
Disponível
online
em:
[http://www.w3.org/TR/xhtml1/]
8. HTML.
Overview
of
HTML.
Disponível
online
em:
[http://www.w3.org/html/]
9. HTML.
HTML
Validator
W3C.
Disponível
online
em:
[http://validator.w3.org/]
10. CSS.
CSS
Validator
W3C.
Disponível
online
em:
[http://jigsaw.w3.org/css‐validator/]
11. DOCTYPE.
Recommended
list
of
DOCTYPE
W3C.
Disponível
online
em:
[http://www.w3.org/QA/2002/04/valid‐dtd‐list.html]
12. MIME.
Informações
úteis
sobre
cabeçalhos
HTTP
e
tipos
MIME.
Disponível
online
em:[http://www.mhavila.com.br/topicos/web/http_mime.html#type]
5
Download

Seção do Cabeçalho - profª msc. elizabete munzlinger