Introdução à Tecnologia Web

Transcrição

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

2 ProfªMSc.ElizabeteMunzlinger SeçãodoCorpo ElementosTextuais Complementares Índice 1 ELEMENTOS TEXTUAIS COMPLEMENTARES Pré-formatação: Tag <pre>... 2 Atributo: class (class/classe)... 2 Atributo: id (identification/identificação)... 2 Atributo: style (style/estilo)... 2 Atributo: title (title/título) Estilos Físicos: Tags <b>, <i>, <tt>, <big>, <small>, <sub> e <sup>... 3 Atributo: class (class/classe)... 3 Atributo: id (identification/identificação)... 3 Atributo: style (style/estilo)... 3 Atributo: title (title/título) Estilos Lógicos: Tags <cite>, <code>, <dfn>, <em>, <kbd>, <samp>, <strong>, <var> e <address>... 4 Atributo: class (class/classe)... 5 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 ELEMENTOSTEXTUAISCOMPLEMENTARES São elementos/tags que acrescentam formatações com ou sem significado no conteúdo textual do site, e parágrafos novos ou em trechos de textos dentro de parágrafos. Podem ser elementos de bloco quando causam separação (quebra de linha) no conteúdo antes e depois dele, ou elementos de linha onde não ocorre separação. 1.1 Pré formatação:tag<pre> Usado para definir blocos de texto com uma tabulação predefinida (feita através do teclado: espaço, tab, enter). Dado que o navegador ao interpretar as tabulações encontradas nos textos, compreende apenas 1 de cada, ignorando os demais que estiverem na sequência. O texto contido como conteúdo na tag <pre> será respeitado pelo navegador com todas as tabulações feitas por teclado. 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 (9.1): Codifique em seu computador e teste. 2

4 ProfªMSc.ElizabeteMunzlinger Visualização da página criada pelo código acima: 1.2 EstilosFísicos:Tags<b>,<i>,<tt>,<big>,<small>,<sub>e<sup> Usado para aplicar formatação visual em palavras sem um significado específico. Funciona como os efeitos negrito, itálico, etc dos documentos de texto convencionais. Devem estar dentro de outros elementos de bloco com conteúdo como parágrafos (tag <p>), títulos de texto (tag <h1>), bloco pré-formatado de tabulação (tag <pre>) etc. Os elementos físicos criam automaticamente uma efeito visual padrão no texto por ele influenciado. Este efeito pode ser posteriormente alterado por Folhas de Estilo (CSS). As tags de estilos físicos são: <b> Texto em negrito (bold) <i> Texto em itálico (italic) <tt> Texto com aparência de fonte teletipo/ espaçamento fixo (teletype) <big> Tamanho da fonte do texto levemente maior (big) <small> Tamanho da fonte do texto levemente menor (small) <sub> Texto subscrito <sup> Texto sobrescrito 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 (9.2): Codifique em seu computador e teste. 3

5 ProfªMSc.ElizabeteMunzlinger Visualização da página criada pelo código acima: 1.3 EstilosLógicos:Tags<cite>,<code>,<dfn>,<em>,<kbd>,<samp>,<strong>,<var> e<address> São formatações físicas que ocorrem nos textos devido à atribuições lógicas que fazemos. Cada tag define alguma característica especial para determinado trecho de texto de acordo com o que ele representa ou simboliza. Os elementos lógicos criam automaticamente uma efeito visual padrão no texto por ele influenciado (itálico, negrito, etc), que pode variar de acordo com o navegador. Este efeito pode ser posteriormente alterado por Folhas de Estilo (CSS). As tags de estilos lógicos são: <cite> Significa que o texto é uma citação, titulo de livro ou filme. <code> Significa que o texto é um código de programa de computador. 4

6 ProfªMSc.ElizabeteMunzlinger <dfn> Significa que o texto é uma definição de um termo. <em> Significa que o texto recebe ênfase na frase. <strong> Significa que o texto recebe forte ênfase na frase. <kbd> Significa que o texto é inserido via teclado. <samp> Significa que o texto é um exemplo. <var> Significa que o texto é uma variável. <address> Significa que o texto é um endereço físico ou digital. Cria quebra e linha. 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). A W3C recomenda dar preferência por estilos lógicos aos estilos físicos, pois acrescentam maior significado no conteúdo das páginas (semântica). Exemplo (9.3): Codifique em seu computador e teste. 5

7 ProfªMSc.ElizabeteMunzlinger Visualização da página criada pelo código acima: DiferençasentreHTML4.01eXHTML1.0destecapítulo AstagseatributosdestecapítulonãoapresentamnenhumadiferençaentreHTMLeXHTML. Abandone 1 EmversõesHTML4.0eanteriores,existemalgumastagsdeestilofísicocomoastags<s>,<strike>,<u>, quejáestãodepreciadas(emdesuso).aoinvésdistousefolhadeestiloscss. Tag<u>:(underline/sublinhado)abandonadoparanãoserconfundidocomhyperlink,queporpadrãoé sublinhado.devesersubstituídoporqualqueroutroefeitoquenãosejasublinhado. Tags<strike>e<s>(riscado)devemsersubstituídospor<del>,poispossuisemântica(significado),queindica queotextofoideletado. <p>texto normal <u>texto em destaque</u> Texto normal</p> <p>texto normal <s>texto riscado</s> Texto normal</p> <p>texto normal <strike>texto riscado</strike> Texto normal</p> Seusaralgumadastagsacima,mudeoDOCTYPEdoseuHTMLparatransitional.Estesatributosnãosãovistos nestecursopoisjá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,