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

Transcrição

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:
<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:
<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:
<html>
<head>
<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:
<html>
3
Profª MSc. Elizabete Munzlinger www.elizabete.com.br <head>
<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:
<html>
<head>
<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:
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.write("Bem vindo ao nosso site!")
</script>
</body>
</html>
<html>
<head>
<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

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

Transcrição

Documentos relacionados

Aula Nº 1 – Introdução

Imagens em HTML

Aula Nº 4 – XHTML+CSS

Exercícios Práticos de HTML e JavaScript Exercício 1: <head

HTML5 Curso W3C Escritório Brasil

Cascading Style Sheets II

html

Desenvolvida exclusivamente para o Este site Apostila HTML.5

1ª Conferência Web W3C Brasil recebe Patrick Sinclair da BBC de

Monitore os daemons

Apostila (Html 4.0.1)

JavaScript - Professora Lucélia

Apostila de HTML - Lucília Ribeiro

CSS

Exemplos: QUAIS OS PRINCIPAIS ATRIBUTOS DAS

40 Curas Espirituais - Dawat-e

Programação HTML

versão pdf

projeto e-jovem apostila html-css-js

O W3C Futuro da Web - Portal Software Livre

Apostila de XHTML

Felippe Velasques Giriboni