Documente Academic
Documente Profesional
Documente Cultură
Formatao de Textos
Neste captulo, vamos trabalhar com as tags de formatao de textos. Aprenderemos as vrias formas de trabalhar com a esttica da pgina, estilos, pr-formatao de textos e letreiros com movimentos. Se quisermos desenvolver uma pgina com recursos do HTML 4, provvel que no utilizemos as tags normais de formatao, j que essa a funo das folhas de estilo que aprenderemos a criar mais tarde. Existem dois tipos de formatao no HTML: Lgico e fsico. Os efeitos de apresentao na tela so os mesmos: o motivo para a diferenciao entre eles se deve idia bsica da independncia entre especificao e apresentao. A formatao lgica acompanha o significado lgico do texto marcado: um endereo de email, uma citao, etc. Sua apresentao final varia conforme o browser, podendo nos oferecer resultados mais ricos e diversos. A formatao fsica especifica explicitamente o estilo que se quer para o texto: itlico, grifado, etc. A apresentao final deste no sofre grandes variaes. A maioria os desenvolvedores evita a utilizao de formataes lgicas em suas pginas por no 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 vem toda aquela formatao de maneira totalmente diferente. Dica: Quando vejamos as CSS (Cascading Style Sheets), ou Folhas de Estilo, prefiraas ao invs das tags de formatao.
Exemplo:
Cabe destacar algo, que, se no foi visto ainda, um captulo e observao parte sobre acentuao no HTML. No recomendvel que os documentos Web tenham acentos. Ainda que todos os navegadores existentes entendam a presena de um caractere acentuado, existem ocasies em que o texto em HTML pode ficar truncado. Por exemplo, quando algum copia uma pgina web e a envia para outra pessoa por meio de correio eletrnico. Para contornar esse problema, existe uma tabela de cdigos que substituem os acentos. Os navegadores transformam esses cdigos em caracteres acentuados e o documento pode ser transmitido por qualquer meio.
Sugesto: 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 cdigo correspondente em HTML Veja a tabela de cdigos de acentos: Tabela de acentos:
Abaixo est uma lista dos caracteres especiais da tabela ISO 8859 Latin-1. O uso destes caracteres necessrio para que uma pgina HTML seja exibida corretamente em qualquer computador do mundo.
Æ Á Â À Å Ã Ä Ç Ð É Ê È Í Î Ì Ï Ñ Ñ Ô Ò Ø Ø Ö Þ Ú Û Ù Ü Ý á â æ à å ã ä ç é ê è ð ë í î ì ï ñ ó & < > " ô ò õ ö ß þ ú û ù ü ý ¡ ¢ £ ¥ ¦ § ¨ © / © ª « ­ ® / ® ¯ ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿ × Þ ÷ & < > "
Alterao 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 nmero, maior a fonte) e o relativo varia entre -4 e 4 (negativos so valores para fontes menores que o valor padro do navegador e positivos, so maiores).
Obs.: Navegadores diferentes tm tamanhos default (padro) do texto diferentes Alm disso, o prprio usurio pode alterar o valor default do eu browser nas configuraes do prprio 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 vrgula 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 oferea mais de uma opo de fonte. Lembre-se de que se escolher uma que no existe no computador do usurio, ser apresentada a fontepadro. COLOR Define a cor da fonte do texto. Essa cor pode ser definida por seu nome em ingls (blue, red, yellow e assim por diante) ou por seu cdigo hexadecimal em RGB, precedido pela cerquilha (ou seja, o smbolo #).
Os browsers adotaram o padro de cores RGB (Red,Green, Blue) para trabalhar com as cores em uma pgina web. Todos os monitores coloridos usam esse padro, ao contrrio das impressoras, que usam o formato CMYK. Os valores so distribudos 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 informaes sobre cores podem ser vistas no arquivo paleta de cores.doc que podem baixar e imprimir.
Pr-Formatao
A marcao <PRE> (abreviao de preformatted) delimita uma rea de texto em que espaos, novas linhas e tabulaes so mantidos. Ou seja, o texto vai ser apresentado da mesma e exata forma como foi digitado, mesmo que no haja marcaes 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 cdigo e extratos bancrios. Exemplo:
Formataes Lgicas
<CITE> <CODE> <DFN> <EM> <KBD> Para ttulos de livros, filmes e citaes curtas. Para indicar trechos de cdigos de programas. Indica definio de uma palavra; em gral apresenta o texto em itlico. nfase, tambm apresentado normalmente em itlico. Indica uma entrada via teclado.
Indica um exemplo. Forte nfase, mostrado normalmente em negrito. Indica varivel ou valores que o usurio deve escrever, geralmente mostrado em itlico. <ADDRESS> Assinatura da pgina, ele quebra a linha e apresenta-se em itlico.
Estilos Fsicos
<B> <I> <TT> <U> <STRIKE> ou <S> <BIG> <SMALL> <SUB> <SUP> Negrito (em alguns browsers, pode aparecer sublinhado). Itlico (em alguns browsers, caracteres apensa inclinados). Tipo teletype fonte de espaamento fixo. Sublinhado; deve ser usado com cuidado, pois pode ser confundida com a apresentao de links. Frase riscada Fonte um pouco maior Fonte um pouco menor Subscrito, o texto fica um pouco abaixo da linha normal e um pouco menor. Sobrescrito, o texto fica um pouco acima da linha normal e um pouco menor.
Sintaxe:
<MARQUEE BEHAVIOR=[scroll/slide/alternate] DIRECTION=[left/right] LOOP=[1..n/infinite] ALIGN=[left/right/center] BGCOLOR=[cor] SCROLLAMOUNT=[espao] SCROLLDELAY=[tempo] HEIGHT=[altura] WIDTH=[largura] HSPACE=[espaamento horizontal] VSPACE=[espaamento 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 atribudos trs
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 pra, 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 posio 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 verses 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 no 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 nmero de pixels, ou pela porcentagem de visualizao na tela. HSPACE e VSPACE Determinam o espao em pixels que deve ficar livre em torno do letreiro. HSPACE representa o espao horizontal (aos lados) e VSPACE, o espao 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>
Pargrafos e Listas
Pargrafo
A tag <P> serve para indicar o incio de um novo pargrafo. Com ela, voc pode definir onde inicia e onde termina cada pargrafo de sua pgina. Se a tag <P> for colocada antes de um ttulo (<H1>, por exemplo), a marca de pargrafo ignorada. Nesse caso o prprio ttulo se encarrega de colocar o espao necessrio.
Sintaxe: <P ALIGN= [left/right/center]> texto </P> Dica: muito importante que voc delimite os pargrafos de sua pgina em vez de
separ-los por tags <BR>. Primeiro, porque fica fcil controlar a organizao de suas pginas e segundo porque se voc estiver interessado em utilizar algumas funes do DHTML, precisar de tags contineres (aquelas que possuem abertura e fechamento).
Bloco de Texto
A tag <BLOCKQUOTE> determina um pargrafo recuado tanto do lado esquerdo quanto do lado direito.
Esse recuo utilizado normalmente para indicar citaes ou comentrios, bem como trechos de destaque. Exemplo:
E o resultado ser:
Diviso de Texto
As divises de texto definem onde o texto deve se dividir e podem tambm definir o alinhamento de um pargrafo ou bloco de texto. A tag <DIV> tambm utilizada como diviso de camadas em DHMTL. Sintaxe: <DIV ALIGN=[left/right/center]> [texto] </DIV>
Listas
As listas so formataes muito utilizadas em paginas web, pois uma forma clara de distino de dados. Alm de ser extremamente atraente, uma lista bem-formatada de fcil pesquisa tambm. As listas podem ser divididas em trs tipos:
Lista de definio Lista no-ordenada Lista ordenada As listas mais comuns so as ordenadas e no-ordenadas, por apresentarem smbolos em seus itens. Esses smbolos enriquecem a esttica da pgina. Essas listas podem ser utilizadas em conjunto.
Resultado:
Exemplo de Aplicao:
Outro exemplo:
Exemplo:
E o resultado ser: