Introdução à Tecnologia Web 2010 HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Cabeçalho

Tamanho: px

Começar a partir da página:

Download "Introdução à Tecnologia Web 2010 HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Cabeçalho"

Edite Delgado Zagalo
8 Há anos
Visualizações:

1 IntroduçãoàTecnologiaWeb2010 HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage ElementosdaSeçãodoCabeçalho ProfªMSc.ElizabeteMunzlinger

2 ProfªMSc.ElizabeteMunzlinger ElementosdaSeçãodoCabeçalho Índice 1 SEÇÃO DE CABEÇALHO: Tag 2 Atributo: Não possui Titulo da página: Tag <title> 2 Atributo: Não possui 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) 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) Folha de estilos incorporada: Tag <style>.. 3 Atributo: type (type/tipo) 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

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.

3 ProfªMSc.ElizabeteMunzlinger 1 SEÇÃODECABEÇALHO:Tag 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ãopossui. Exemplo: outras tags com informações lógicas conteúdo da página As informações lógicas presentes na seção do cabeçalho são criadas a partir das tags a seguir: 1.1 Titulodapá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ãopossui. Exemplo: <title> SOLID Multimedia Center </title> <body conteúdo da página 1.2 Metainformaçõ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(httpheader/cabeçalhohttp) 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 : ISO ou TF-8), dentre outras. 2

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ãopossui.

4 ProfªMSc.ElizabeteMunzlinger 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: <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= <meta http-equiv="content-type" content="text/html;charset=iso "> 1.3 Inclusãodearquivosexternos: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(HTTPReference/referênciaHTTP) Especifica a URL (endereço) do recurso incluído. Pode ser absoluto ou relativo. Exemplos de inclusão de arquivos em HTML: <link rel="stylesheet" type="text/css" href="estilos/folha_de_estilos.css"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 1.4 Folhadeestilosincorporada: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: 3

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.

5 <style type="text/css"> h1 {color:red} p {color:blue} </style> <h1>contabilidade</h1> <p>faça uma cotação de IR online</p> ProfªMSc.ElizabeteMunzlinger Definiçãodescript: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: <script type="text/javascript" src=" Exemplos de uso de script interno (JavaScript) em HTML: <script type="text/javascript"> document.write("bem vindo ao nosso site!") </script> <script type="text/javascript"> function valida() { window.alert("dados enviados com sucesso!") </script> Podem estar presentes na seção do corpo ou do cabeçalho, dependendo do objetivo do script. 4

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.

6 ProfªMSc.ElizabeteMunzlinger DiferençasentreHTML4.01eXHTML1.0destecapítulo 1 EmXHTMLastagsvaziasmetaelinkdevemtermarcadefim(barra): <meta name= author content= Joao /> <link rel="stylesheet" type="text/css" href="theme.css" /> Abandone 1 EmversõesHTML4.0eanteriores,atagscriptusaoatributolanguageparadefiniralinguagemscript usada.aoinvésdisto,useoatributotype. <script language= javascript > <script type= text/javascript > 2 EmversõesHTML4.0eanteriores,atagbodytematributosdeformataçãocomobgcolor,background, bgproperties,text,link,alink,vlink,leftmargin,topmargin.todasestasformataçõesjáestãodepreciadase devemserusadasatravésdeestiloscss. <body bgcolor="white" background="imagens/fundo.gif" bgproperties="fixed" text="blue" link="yellow" alink="red" vlink="cyan" leftmargin="20" topmargin="20"> Seusarpelomenos1destesatributosmudeoDOCTYPEdoseuHTMLparatransitionalouframeset. Estesatributosnãosãovistosnestecursopoisjáestãoemdesuso,mascasoqueiraaprender,deveráserpor suaconta ). ReferênciasBibliográficas 1. MACEDO,MarcelodaSilva.ConstruindositesadotandopadrõesWeb.RiodeJaneiro:CiênciaModerna, MARCONDES,ChristianAlfim.HTMLfundamental4.0.SãoPaulo:Érica, CARDOSO,Márdel.Desenvolvimentowebparaoensinosuperior.RiodeJaneiro:AxcelBooks, W3C.WordWideWebConsortium.Disponívelonlineem:[ 5. HTML.HTMLWorkingGroup.Disponívelonlineem:[ 6. HTML.W3CRecomendation:HTML4.01Specification.Disponívelonlineem:[ 7. XHTML.W3CRecomendation:XHTML1.0TheExtensibleHyperTextMarkupLanguage(SecondEdition).A ReformulationofHTML4inXML1.0.Disponívelonlineem:[ 8. HTML.OverviewofHTML.Disponívelonlineem:[ 9. HTML.HTMLValidatorW3C.Disponívelonlineem:[ 10. CSS.CSSValidatorW3C.Disponívelonlineem:[ validator/] 11. DOCTYPE.RecommendedlistofDOCTYPEW3C.Disponívelonlineem: [ dtd list.html] 12. MIME.InformaçõesúteissobrecabeçalhosHTTPetiposMIME.Disponívelonline em:[ 5

0eanteriores,atagscriptusaoatributolanguageparadefiniralinguagemscript usada.aoinvésdisto,useoatributotype. <script language= javascript > <script type= text/javascript > 2 EmversõesHTML4.

Documentos relacionados

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Estrutura Básica do Documento HTML

Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Estrutura Básica do Documento HTML IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage EstruturaBásicadoDocumentoHTML ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger