Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Corpo Resumo

Tamanho: px

Começar a partir da página:

Download "Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Corpo Resumo"

Norma Pereira Martinho
7 Há anos
Visualizações:

1 IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage ElementosdaSeçãodoCorpo Resumo ProfªMSc.ElizabeteMunzlinger

2 ProfªMSc.ElizabeteMunzlinger ElementosdaSeçãodoCorpo Resumo Índice 1 SEÇÃO DO CORPO: Tag <body>... 2 Atributo: class (class/classe)... 2 Atributo: id (identification/identificação)... 2 Atributo: style (style/estilo) Elementos de corpo resumo:... 2 a) Elementos textuais básicos:... 2 Títulos...2 Parágrafos...2 Quebrasdelinha...2 b) Pré-formatações de texto:... 2 Pré formatação...2 Estilosfísicos...3 Estiloslógicos...3 c) Estrutura da página:... 3 Divisões...3 Linhasseparadoras...3 Comentários...3 d) Listas:... 3 ListasOrdenadas...3 ListasNãoOrdenada...3 ListasdeDefinição...3 e) Imagens:... 3 Imagens...3 f) Hiperligações:... 3 Linkseâncoras...3 g) Tabelas de conteúdo:... 3 Tabelas...3 h) Caracteres:... 3 Caracteresespeciaisentidades,conjuntosdecaracteres...3 i) Formulários:... 4 Formulários...4 Diferenças entre HTML 4.01 e XHTML 1.0 deste capítulo... 4 Referências Bibliográficas

3 ProfªMSc.ElizabeteMunzlinger 1 SEÇÃODOCORPO:Tag<body> Define a seção do corpo do site, onde constarão todos os elementos que irão compor a estrutura do documento/página. É o corpo do documento. Entre estas marcas estará contido a maior parte do conteúdo a ser apresentado, textos, imagens, links, tabelas, títulos, formulários, etc. Atributo:class(class/classe) Especifica um nome de classe para o elemento. Classes são usadas para definir um bloco de formatação em Folha de Estilos CSS. Ao usar o atributo no elemento, significa que ele passa a pertencer a uma determinada classe criada no CSS. O atributo class pode repetir em vários outros elementos na página, ou seja, vários elementos diferentes podem pertencer a uma mesma classe definida no CSS. Atributo:id(identification/identificação) Especifica uma identificação única para o elemento. Normalmente um id não pode repetir dentro do documento HTML. Usado para associar a uma formatação em Folha de Estilos, mas também para identificar o elemento a ser manipulado por um script client-side, em linguagem JavaScript, por exemplo. Atributo:style(style/estilo) Especifica uma formatação de Folha de Estilos localmente, chamada de Folha de Estilo Inline. Exemplo de tag de corpo com os atributos acima: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>titulo da página</title> <style type="text/css">.geral {color:sylver; background-color:#ffffff} #corpo {border-color:black} </style> </head> <body class= geral id= corpo style= font-size:10pt > conteúdo da página com elementos de corpo... </body> </html> 1.1 Elementosdecorpo resumo: Os elementos que pertencem a seção de corpo estão listadas a seguir para ter uma visão geral e serão estudados detalhadamente em outros capítulos. a)elementostextuaisbásicos: Títulos Usado para definir títulos dos textos no documento. Tags <h1> a <h6> Parágrafos Todo bloco de texto que não for um título deve ser um parágrafo. Tag <p> Quebrasdelinha Correspondente ao enter do teclado. Tag <br> b)pré formataçõesdetexto: Pré formatação Texto com tabulação respeitada pelo navegador. Tag <pre>. 2

4 ProfªMSc.ElizabeteMunzlinger Estilosfísicos Formatações visuais sem significado (negrito, itálico, etc). Tags <b>, <i>, <tt>, <big>, <small>, <sub> e <sup>. Estiloslógicos Formatações visuais com significado (citação, código, exemplo, etc). Tags <cite>, <code>, <dfn>, <em>, <kbd>, <samp>, <strong>, <var> e <address> c)estruturadapágina: Divisões Divisões virtuais para criar a estrutura da página. Cada divisão pode conter um ou mais elementos. Tags <div> e <span> Linhasseparadoras Linhas para separar conteúdos. Tag <hr> Comentários Usado para inserir comentários no código que não são vistos na página, mas que importam para o desenvolvedor. Tag  d)listas: ListasOrdenadas Lista ordenadas através de algarismos arábicos, romanos ou letras. Tags <ol> e <li>. ListasNãoOrdenada Listas ordenadas apenas por marcadores. Tags <ul> e <li>. ListasdeDefinição Listas para definições textuais (conceitos).tags <dl> e <dt>. e)imagens: Imagens Imagens de diversas extensões inseridas no documento. Tag <img>. f)hiperligações: Linkseâncoras Ligações para outros documentos, ou dentro do mesmo documento. Tag <a>. g)tabelasdeconteúdo: Tabelas Tabelas para informações tabulares. Tags <table>, <tr>, <td>, <th>, <caption>, <thead>, <tbody> e <tfoot>. h)caracteres: Caracteresespeciaisentidades,conjuntosdecaracteres Caracteres reservados e caracteres simbólicos. (iso, utf). 3

5 ProfªMSc.ElizabeteMunzlinger i)formulários: Formulários Campos para captação de dados. Tags <form>, <input>, <textarea>, <select> e <option> DiferençasentreHTML4.01eXHTML1.0destecapítulo 1 EmXHTMLtodasastagsvaziasdevemtermarcadefim(barra). Abandone 1 EmversõesHTML4.0eanteriores,atagbodycontinhaatributosdeformataçã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"> Seusarpelomenos1destesatributosacimamudeoDOCTYPEdoseuHTMLparatransitional. 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ívelonlineem: [ 13. SILVA,MauricioSamy.ConstruindositescomCSSe(X)HTML.SãoPaulo:Novatec,

Documentos relacionados

Introdução à Tecnologia Web

Introdução à Tecnologia Web IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo ElementosTextuais Complementares ProfªMSc.ElizabeteMunzlinger ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo