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:
httpequiv
(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
