Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Elementos Textuais Básicos

Tamanho: px

Começar a partir da página:

Download "Introdução à Tecnologia Web HTML HyperText Markup Language XHTML extensible HyperText Markup Language Seção do Corpo Elementos Textuais Básicos"

Lucas Gabriel Coelho Beretta
8 Há anos
Visualizações:

1 IntroduçãoàTecnologiaWeb HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage SeçãodoCorpo ElementosTextuaisBásicos ProfªMSc.ElizabeteMunzlinger

2 ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo ElementosTextuaisBásicos Índice 1 ELEMENTOS TEXTUAIS BÁSICOS 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) 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) 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

3 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

4 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

5 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

6 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

7 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, 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.W3CRecomendation:CascadingStyleSheetsHomePage.Disponívelonlineem: [ 11. DOCTYPE.RecommendedlistofDOCTYPEW3C.Disponívelonlineem: [ dtd list.html] 12. Webdesign.RevistaWebdesign.RiodeJaneiro:Artecom, SILVA,MauricioSamy.ConstruindositescomCSSe(X)HTML.SãoPaulo:Novatec,

Documentos relacionados

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

Introdução à Tecnologia Web 2010 HTML HyperText Markup Language XHTML extensible HyperText Markup Language Elementos da Seção do Cabeçalho IntroduçãoàTecnologiaWeb2010 HTML HyperTextMarkupLanguage XHTML extensiblehypertextmarkuplanguage ElementosdaSeçãodoCabeçalho ProfªMSc.ElizabeteMunzlinger www.elizabete.com.br ProfªMSc.ElizabeteMunzlinger