Módulo 1 Formatação de Textos

Neste capítulo, vamos trabalhar com as tags de formatação de textos. Aprenderemos as várias formas de trabalhar com a estética da página, estilos, pré-formatação de textos e letreiros com movimentos. Se quisermos desenvolver uma página com recursos do HTML 4, é provável que não utilizemos as tags normais de formatação, já que essa é a função das folhas de estilo que aprenderemos a criar mais tarde. Existem dois tipos de formatação no HTML: Lógico e físico. Os efeitos de apresentação na tela são os mesmos: o motivo para a diferenciação entre eles se deve à idéia básica da independência entre especificação e apresentação. A formatação lógica acompanha o significado lógico do texto marcado: um endereço de email, uma citação, etc. Sua apresentação final varia conforme o browser, podendo nos oferecer resultados mais ricos e diversos. A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado, etc. A apresentação final deste não sofre grandes variações. A maioria os desenvolvedores evita a utilização de formatações lógicas em suas páginas por não ser capaz de manter o controle total sobre elas. Imagine-se projetando por horas um design maravilhoso para seu site e quando você o coloca no ar, percebe que os seus clientes vêem toda aquela formatação de maneira totalmente diferente. Dica: Quando vejamos as CSS (Cascading Style Sheets), ou Folhas de Estilo, prefira-as ao invés das tags de formatação. Título do Texto (Cabeçalhos) Os títulos são definidos pelas tags <Hn> em que n pode valer n = 1, 2,..., 6. os números de 1 a 6 apresentados nesta tag representam a prioridade do titulo em que, quanto maior o número, menor a prioridade ou, para sermos didáticos, menos o tamanho. Sintaxe: <H[1..6] ALIGN=[left/right/center]> título </H[1..6]>

Exemplo:

Cujo resultado será o da figura abaixo:

Cabe destacar algo, que, se não foi visto ainda, um capítulo e observação à parte sobre acentuação no HTML. Não é recomendável que os documentos Web tenham acentos. Ainda que todos os navegadores existentes entendam a presença de um caractere acentuado, existem ocasiões em que o texto em HTML pode ficar truncado. Por exemplo, quando alguém copia uma página web e a envia para outra pessoa por meio de correio eletrônico. Para contornar esse problema, existe uma tabela de códigos que substituem os acentos. Os navegadores transformam esses códigos em caracteres acentuados e o documento pode ser transmitido por qualquer meio.

Sugestão: O documento pode ser escrito com os acentos e, antes de ir para o servidor web, pode ser submetido a uma macro de processador de texto (por exemplo, do Word) para substituí-los pelo código correspondente em HTML Veja a tabela de códigos de acentos:

Tabela de acentos:

Abaixo está uma lista dos caracteres especiais da tabela ISO 8859 Latin-1. O uso destes caracteres é necessário para que uma página HTML seja exibida corretamente em qualquer computador do mundo.

Æ Á Â À Å Ã Ä Ç Ð É Ê È Í Î Ì Ï Ñ Ñ Ô Ò Ø Ø Ö Þ Ú Û Ù Ü Ý á â æ à å ã ä ç é ê è ð ë í î ì ï ñ ó

&AElig; &Aacute; &Acirc; &Agrave; &Aring; &Atilde; &Auml; &Ccedil; &ETH; &Eacute; &Ecirc; &Egrave; &Iacute; &Icirc; &Igrave; &Iuml; &Ntilde; &Ntilde; &Ocirc; &Ograve; &Oslash; &Oslash; &Ouml; &THORN; &Uacute; &Ucirc; &Ugrave; &Uuml; &Yacute; &aacute; &acirc; &aelig; &agrave; &aring; &atilde; &auml; &ccedil; &eacute; &ecirc; &egrave; &eth; &euml; &iacute; &icirc; &igrave; &iuml; &ntilde; &oacute;

ô ò õ ö ß þ ú û ù ü ý ¡ ¢ £ ¥ ¦ § ¨ © ª «

® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ × Þ ÷ & < > "

&ocirc; &ograve; &otilde; &ouml; &szlig; &thorn; &uacute; &ucirc; &ugrave; &uuml; &yacute; &#161; &#162; &#163; &#165; &#166; &#167; &#168; &#169; / &copy; &#170; &#171; &#173; &#174; / &reg; &#175; &#176; &#177; &#178; &#179; &#180; &#181; &#182; &#183; &#184; &#185; &#186; &#187; &#188; &#189; &#190; &#191; &#215; &#222; &#247; &amp; &lt; &gt; &quot;

Alteração de Fonte Para alterarmos os atributos da fonte de um texto da home-page, utilizamos a tag <FONT>.

Sintaxe: <FONT SIZE= “[tamanho]” COLOR=”[cor]” FACE=”[fonte, fonte opcional, ...]”> Texto </FONT> Atributos: SIZE – Define o tamanho da fonte utilizando um tamanho absoluto ou relativo. O valor para o tamanho absoluto varia entre 1 e 7(quanto maior o número, maior a fonte) e o relativo varia entre -4 e 4 (negativos são valores para fontes menores que o valor padrão do navegador e positivos, são maiores). Obs.: Navegadores diferentes têm tamanhos default (padrão) do texto diferentes Além disso, o próprio usuário pode alterar o valor default do eu browser nas configurações do próprio browser. FACE – Define o tipo de texto. FACE é o nome da fonte que a tag vai representar. Você pode definir mais de uma fonte para o mesmo texto. As fontes devem ser separadas por vírgula e o browser procura na ordem qual delas ele possui no computador do cliente para representar. Obs.: Escolha fontes comuns que existam em quase todos os computadores e sempre ofereça mais de uma opção de fonte. Lembre-se de que se escolher uma que não existe no computador do usuário, será apresentada a fonte-padrão. COLOR – Define a cor da fonte do texto. Essa cor pode ser definida por seu nome em inglês (blue, red, yellow e assim por diante) ou por seu código hexadecimal em RGB, precedido pela cerquilha (ou seja, o símbolo #). Como funciona a paleta de cores do Navegador Os browsers adotaram o padrão de cores RGB (Red,Green, Blue) para trabalhar com as cores em uma página web. Todos os monitores coloridos usam esse padrão, ao contrário das impressoras, que usam o formato CMYK. Os valores são distribuídos com dois caracteres para cada cor, na mesma ordem apresentada acima. Ela pode variar entre 00 e FF para cada uma, totalizando 256 tons de cores para podermos misturar. Quanto maior o valor que atribuirmos, mais clara ficará a cor. Exemplos: #FF0000 Vermelho-puro #00FF00 Verde-puro #FFCCCC Vermelho bem claro. Observar que para clarear o vermelho-puro, os

valores de verde e de azul foram aumentados. #FFFFFF Branco

Mais informações sobre cores podem ser vistas no arquivo paleta de cores.doc que podem baixar e imprimir. Pré-Formatação A marcação <PRE> (abreviação de preformatted) delimita uma área de texto em que espaços, novas linhas e tabulações são mantidos. Ou seja, o texto vai ser apresentado da mesma e exata forma como foi digitado, mesmo que não haja marcações do HTML. É uma forma de preservar o formato de um texto. As tags HTML continuam valendo dentro da tag <PRE>. Esse recurso é excelente para exemplos de código e extratos bancários. Exemplo:

Cujo resultado será:

Formatações Lógicas <CITE> Para títulos de livros, filmes e citações curtas. <CODE> Para indicar trechos de códigos de programas. <DFN> Indica definição de uma palavra; em gral apresenta o texto em itálico. <EM> Ênfase, também apresentado normalmente em itálico. <KBD> Indica uma entrada via teclado.

<SAMP> Indica um exemplo. <STRONG> Forte ênfase, mostrado normalmente em negrito. <VAR> Indica variável ou valores que o usuário deve escrever, geralmente

mostrado em itálico. <ADDRESS> Assinatura da página, ele quebra a linha e apresenta-se em itálico.

Estilos Físicos <B> Negrito (em alguns browsers, pode aparecer sublinhado). <I> Itálico (em alguns browsers, caracteres apensa inclinados). <TT> Tipo teletype – fonte de espaçamento fixo. <U> Sublinhado; deve ser usado com cuidado, pois pode ser confundida

com a apresentação de links. <STRIKE> ou <S>

Frase riscada

<BIG> Fonte um pouco maior <SMALL> Fonte um pouco menor <SUB> Subscrito, o texto fica um pouco abaixo da linha normal e um pouco

menor. <SUP> Sobrescrito, o texto fica um pouco acima da linha normal e um

pouco menor.

Letreiros Animados (Marquees) É possível obter o efeito animado de texto por meio da tag <MARQUEE>. Com essa tag, o texto pode se mover de um lado para outro da sua página, como se escorregasse por ela. Sintaxe: <MARQUEE BEHAVIOR=”[scroll/slide/alternate]” DIRECTION=”[left/right]” LOOP=”[1..n/infinite]” ALIGN=”[left/right/center]” BGCOLOR=”[cor]” SCROLLAMOUNT=”[espaço]” SCROLLDELAY=”[tempo]” HEIGHT=”[altura]” WIDTH=”[largura]” HSPACE=”[espaçamento horizontal]” VSPACE=”[espaçamento vertical]”> {Letreiro} </MARQUEE> O maior problema desse efeito é que ele só é visto por alguns browsers. Atributos BEHAVIOR – Define como o letreiro vai deslizar na tela. Podem ser atribuídos três valores:

♦ SCROLL – o letreiro continua rodando continuamente em um mesmo sentido. ♦ SLIDE – O letreiro parte de um ponto da tela, vai até o outro e pára, quando

chegar ao final de seu percurso. ♦ ALTERNATE – Ele desliza até o outro lado da tela, mas quando chega lá, o

letreiro volta pela tela novamente, indo e voltando. DIRECTION – Define a posição em que o texto vai deslizar, podendo ser left, right ou top (de baixo para cima) ou finalmente bottom (de cima para baixo).

Funciona esse atributo, com top e bottom apenas em algumas versões do Internet Explorer. LOOP – Determina quantas vezes o texto deslizará pela tela. Caso queira deslizar infinitamente o letreiro pela tela, utilize o valor infinite ou simplesmente não insira o atributo LOOP. HEIGHT e WIDTH – Definem, respectivamente, a largura e a altura da tela. Seus valores podem ser apresentados de duas formas: pelo número de pixels, ou pela porcentagem de visualização na tela. HSPACE e VSPACE – Determinam o espaço em pixels que deve ficar livre em torno do letreiro. HSPACE representa o espaço horizontal (aos lados) e VSPACE, o espaço vertical (acima e abaixo). BGCOLOR – Define a cor de fundo da área do letreiro. SCROLLAMOUNT e SCROLLDELAY – Podemos, com esses dois atributos, controlar a velocidade do letreiro. O SCROLLDELAY define o tempo, em milissegundos, que o letreiro vai demorar em cada um dos quadros, e o SCROLLAMOUNT define a quantidade de pixels que ele vai percorrer em cada quadro. Exemplo: <MARQUEE BEHAVIOR=”alternate” DIRECTION=”right” LOOP=”3” HEIGHT=”10%” WIDTH=”40%” HSPACE=”10” VSPACE=”20” BGCOLOR=”#CCFFCC” SCROLLAMOUNT=”5” SCROLLDELAY=”100”>

Parágrafos e Listas

Parágrafo A tag <P> serve para indicar o início de um novo parágrafo. Com ela, você pode definir onde inicia e onde termina cada parágrafo de sua página. Se a tag <P> for colocada antes de um título (<H1>, por exemplo), a marca de parágrafo é ignorada. Nesse caso o próprio título se encarrega de colocar o espaço necessário. Sintaxe: <P ALIGN= “[left/right/center]”> texto </P> Dica: É muito importante que você delimite os parágrafos de sua página em vez de separá-los por tags <BR>. Primeiro, porque fica fácil controlar a organização de suas páginas e segundo porque se você estiver interessado em utilizar algumas funções do DHTML, precisará de tags contêineres (aquelas que possuem abertura e fechamento). Bloco de Texto A tag <BLOCKQUOTE> determina um parágrafo recuado tanto do lado esquerdo quanto do lado direito.

Esse recuo é utilizado normalmente para indicar citações ou comentários, bem como trechos de destaque. Exemplo:

E o resultado será:

Divisão de Texto As divisões de texto definem onde o texto deve se dividir e podem também definir o alinhamento de um parágrafo ou bloco de texto. A tag <DIV> também é utilizada como divisão de camadas em DHMTL. Sintaxe: <DIV ALIGN=”[left/right/center]”> [texto] </DIV> Listas As listas são formatações muito utilizadas em paginas web, pois é uma forma clara de distinção de dados. Além de ser extremamente atraente, uma lista bem-formatada é de fácil pesquisa também. As listas podem ser divididas em três tipos:

♦ Lista de definição ♦ Lista não-ordenada ♦ Lista ordenada

As listas mais comuns são as ordenadas e não-ordenadas, por apresentarem símbolos em seus itens. Esses símbolos enriquecem a estética da página. Essas listas podem ser utilizadas em conjunto. Listas de Definição (Definition List) Também são chamadas de “listas de glossário”, sendo utilizadas para definir termos, criar textos explicativos, organizando o texto em tópicos e sub-tópicos (ou termos e definição de termo). As tags <DL> e </DL> são combinadas com as tags <DT> para termos (Term) e <DD> para definições do termo apresentado (definition). Sintaxe: <DL><!-- inicio da lista de definição --> <DT> [termo a ser definido] <DD> [definição] </DL><!-- fim da lista de definição --> Exemplo:

Resultado:

Lista Não-Ordenada (Lista com Marcadores) Nesta lista o browser adiciona um símbolo ou marcador ao lado do item. Seus marcadores podem ser controlados e podemos aninhar varias listas. Além das tags <UL> e </UL> que marcam o início e o fim da lista, para cada item da lista Sintaxe: <UL TYPE=”[disc/circle/square]”><!-- início da lista não-ordenada --> <LI TYPE=”[disc/circle/square]”>[Item da lista] </UL><!-- fim da lista --> Exemplo de Aplicação:

Cujo resultado é o seguinte:

Outro exemplo:

Cujo resultado será:

Listas Ordenadas (Ordered Lists) São aquelas que definem uma ordem para seus dados. Essa definição pode ser arábica, romana, ordenada por letras maiúsculas ou minúsculas. Com isso, é possível estabelecer uma seqüência lógica para a sua lista. Sintaxe: <OL TYPE=”[1/I/i/A/a]” START=”[início]”><!-- início da lista ordenada --> <LI TYPE=”[1/I/i/A/a]” VALUE=”[número]”>[Item da Lista] </OL> <!-- fim da lista -->

O resultado será o seguinte:

Linhas Horizontais (Horizontal Rule) As linhas da HTML são extremamente atraentes e utilizadas para a divisão de assuntos ou partes de um assunto. A tag <HR> cria uma linha horizontal em alto relevo e de ponta a ponta da página. Sintaxe: <HR WIDTH=”largura” SIZE=”[espessura]” ALIGN=”[left/right/center]” NOSHADE COLOR=”[cor]”> Exemplo:

E o resultado será: