IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo ElementosTextuaisBásicos ProfªMSc.ElizabeteMunzlinger
ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo ElementosTextuaisBásicos Índice 1 ELEMENTOS TEXTUAIS BÁSICOS... 2 1.1 Títulos: Tags <h1> a <h6>... 2 Atributo: class (class/classe)... 2 Atributo: id (identification/identificação)... 2 Atributo: style (style/estilo)... 2 Atributo: title (title/título)... 2 1.2 Parágrafo: Tag <p>... 3 Atributo: class (class/classe)... 3 Atributo: id (identification/identificação)... 3 Atributo: style (style/estilo)... 3 Atributo: title (title/título)... 3 1.3 Quebra de linha: Tag <br>... 4 Atributo: class (class/classe)... 4 Atributo: id (identification/identificação)... 5 Atributo: style (style/estilo)... 5 Atributo: title (title/título)... 5 Diferenças entre HTML 4.01 e XHTML 1.0 deste capítulo... 6 Referências Bibliográficas... 6 1
ProfªMSc.ElizabeteMunzlinger 1 ELEMENTOSTEXTUAISBÁSICOS Definem estruturas textuais básicas para o conteúdo do site. São tags para criação de títulos, parágrafos de texto e quebras de linha para os parágrafos. Os elementos de títulos, parágrafos e quebras de linha vistos neste capítulo são chamados de elementos de blocos. São assim chamados pois produzem uma separação entre estes e os elementos inseridos antes e depois, tornando-os blocos separados. 1.1 Títulos(header/cabeçalho):Tags<h1>a<h6> Define os títulos dos textos no documento HTML/XHTML. Possuem numeração do 1 ao 6 como forma de especificar a importância de cada título no documento, sendo o número 1 de maior importância (nível 1). A W3C orienta que em cada documento tenha apenas um título de nível 1, e o seu texto deve descrever o principal conteúdo/objetivo do site, auxiliando na indexação do site por motores de busca, como Google. 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. 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 Inline (CSS localmente). Atributo:title(title/título) Especifica uma informação adicional dobre o elemento. Exemplo (8.1): Codifique em seu computador e teste. 2
ProfªMSc.ElizabeteMunzlinger Visualização da página criada pelo código acima: 1.2 Parágrafo(paragraph):Tag<p> Usado para definir parágrafos (blocos) de textos no documento. Todo o texto inserido em um documento HTML/XHTML deve pertencer a elemento textual, tal como um título ou a um parágrafo, não devendo estar solto entre os demais elementos. Este elemento cria automaticamente uma quebra de linha antes e depois do texto por ele influenciado. Atributo:class(class/classe) Especifica um nome de classe para o elemento. Atributo:id(identification/identificação) Especifica uma identificação única para o elemento. Atributo:style(style/estilo) Especifica uma formatação de Folha de Estilos Inline. Atributo:title(title/título) Especifica uma informação adicional dobre o elemento. OBS: os atributos class, id, style e title tem o mesmo objetivo em todos os elementos em que estão presentes (reveja a descrição dos mesmos nos atributos do item 1.1, acima). Exemplo (8.2): Codifique em seu computador e teste. 3
ProfªMSc.ElizabeteMunzlinger Visualização da página criada pelo código acima: 1.3 Quebradelinha(break):Tag<br> Usado para inserir quebras de linha nos blocos de textos no documento. Atributo:class(class/classe) Especifica um nome de classe para o elemento. 4
ProfªMSc.ElizabeteMunzlinger Atributo:id(identification/identificação) Especifica uma identificação única para o elemento. Atributo:style(style/estilo) Especifica uma formatação de Folha de Estilos Inline. Atributo:title(title/título) Especifica uma informação adicional dobre o elemento. OBS: Apesar de a tag <br> aceitar estes atributos, eles não costumam ser usados para este elemento. Os atributos class, id, style e title tem o mesmo objetivo em todos os elementos em que estão presentes (reveja a descrição dos mesmos nos atributos do item 1.1, acima). Exemplo (8.3): Codifique em seu computador e teste. Visualização da página criada pelo código acima: 5
ProfªMSc.ElizabeteMunzlinger DiferençasentreHTML4.01eXHTML1.0destecapítulo EmXHTMLtodaatag<p>podeteroatributoxml:langquedefineoidiomadotextocontidonoparágrafo(não requerido,masrecomendado). <p xml:lang= PT-BR >Texto do Parágrafo </p> EmXHTMLatagvazia<br>deveterbarradefechamento. <br /> Abandone 1 EmversõesHTML4.0eanteriores,astags<h1>a<h6>eatag<p>tematributosdeformataçãocomoalign quejáestádepreciado.aoinvésdistousefolhadeestiloscss. <h2 align="center"> Título de nível 2 </h2> <p align="justify"> Texto do Parágrafo</p> 2 EmversõesHTML4.0eanteriores,astags<p>tambémerausadacomoquebradelinha. Texto texto<p>texto texto <p> texto texto <p> Seusaralgumdestesatributos,comoalignmudeoDOCTYPEdoseuHTMLparatransitional.Estesatributos nãosãovistosnestecursopoisjáestãoemdesuso,mascasoqueiraaprender,deveráserporsuaconta. ReferênciasBibliográficas 1. MACEDO,MarcelodaSilva.ConstruindositesadotandopadrõesWeb.RiodeJaneiro:CiênciaModerna, 2004. 2. MARCONDES,ChristianAlfim.HTMLfundamental4.0.SãoPaulo:Érica,2005. 3. CARDOSO,Márdel.Desenvolvimentowebparaoensinosuperior.RiodeJaneiro:AxcelBooks,2004. 4. W3C.WordWideWebConsortium.Disponívelonlineem:[http://www.w3.org/] 5. HTML.HTMLWorkingGroup.Disponívelonlineem:[http://www.w3.org/html/wg/] 6. HTML.W3CRecomendation:HTML4.01Specification.Disponívelonlineem:[http://www.w3.org/TR/html4/] 7. XHTML.W3CRecomendation:XHTML1.0TheExtensibleHyperTextMarkupLanguage(SecondEdition).A ReformulationofHTML4inXML1.0.Disponívelonlineem:[http://www.w3.org/TR/xhtml1/] 8. HTML.OverviewofHTML.Disponívelonlineem:[http://www.w3.org/html/] 9. HTML.HTMLValidatorW3C.Disponívelonlineem:[http://validator.w3.org/] 10. CSS.W3CRecomendation:CascadingStyleSheetsHomePage.Disponívelonlineem: [http://www.w3.org/style/css/] 11. DOCTYPE.RecommendedlistofDOCTYPEW3C.Disponívelonlineem: [http://www.w3.org/qa/2002/04/valid dtd list.html] 12. Webdesign.RevistaWebdesign.RiodeJaneiro:Artecom,2010. 13. SILVA,MauricioSamy.ConstruindositescomCSSe(X)HTML.SãoPaulo:Novatec,2007. 6