Formatação de textos e caracteres Há dois tipos de formatação em HTML: lógico e físico. Os efeitos de apresentação na tela são os mesmos: o motivo da distinção entre eles se deve à idéia básica de independência entre especificação e apresentação. Quando formatamos um trecho de texto como cabeçalho de nível 1, não explicitamos se esse tipo de cabeçalho deve ser em alguma fonte determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou centralizado. Esses detalhes de apresentação são deixados para o browser - o dispositivo de apresentação do documento - que pode ser configurado de acordo com o leitor (usuário final). Desse modo, além de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentação de cabeçalhos, parágrafos, listas, etc. A formatação lógica segue o significado lógico do texto marcado: um endereço de e-mail, uma citação etc. Sua apresentação final varia conforme o browser, podendo oferecer resultados mais ricos. A formatação física especifica explicitamente o estilo que se quer para o texto: itálico, grifado etc. Sua apresentação final não sofre grandes variações. Blocos de texto HTML oferece as seguintes formatações de blocos de texto: <PRE> Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulações:<pre>uma linha aqui, outra ali, etc.</pre> Resulta em: uma linha aqui, outra ali, etc. Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa marcação dentro de outra marcação que já apresente tabulações e espaços específicos. Veja este exemplo, que apresenta também alguns problemas com o uso de <PRE>. <BLOCKQUOTE> É usado para citações longas: <blockquote>A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional.</blockquote> (Stephen W. Hawking, “Uma Breve História do Tempo”) A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra siga uma trajetória reta no espaço-tempo quadridimensional, parece-nos que se desloca em órbita circular no espaço tridimensional. (Stephen W. Hawking, “Uma Breve História do Tempo”) <ADDRESS> Usado para formatar endereços E-mail e referências a autores de documentos: Envie críticas e sugestões para <address>
[email protected]</address> Envie críticas e sugestões para
[email protected]ção de frases Como visto anteriormente (em Formatação de Textos e Caracteres), HTML permite dois tipos de formatação: lógico e físico; aqui veremos as formatações mais utilizadas: Estilos Lógicos <CITE> Para títulos de livros, filmes, e citações curtas. Exemplo: Assisti Guerra nas Estrelas umas oito vezes! <CODE> Para indicar trechos de código de programas. Exemplo: for (x=0); cl &&(!feof(stdin)); x++)); <DFN> Indica definição de uma palavra, em geral apresenta o texto em itálico. Exemplo: CERN: Centre d’Éstudes et Recherches Nucleaires <EM> Ênfase, também normalmente apresentado em itálico. Exemplo: É preciso pesquisar muito para encontrar o termo exato. <KBD> Indica uma entrada via teclado. Exemplo: Para ler mensagens recebidas, digite pine -i <SAMP> Indica uma seqüência de caracteres, por exemplo uma mensagem de erro ou um resultado. Exemplo: O resultado do primeiro applet é: Hello, World! <STRONG> Forte ênfase, mostrado normalmente em negrito. Exemplo: Antes de enviar um e-mail, confira o campo “Subject:”! <VAR> Indica variáveis, ou valores que o usuário deverá escrever; geralmente mostrado em itálico. Exemplo: No campo Login, escreva guest. Estilos Físicos <B> Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode aparecer sublinhado) <I> Itálico (em alguns casos, caracteres inclinados) <TT> Tipo teletype - fonte de espaçamento fixo. <U> Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentação de links. <STRIKE> ou <S> Frase riscada. <BIG> Fonte um pouco maior. <SMALL> Fonte um pouco menor. <SUB> Frase em estilo índice, como em H2O. <SUP> Frase em estilo expoente, como em Km2. Caracteres especiais HTML permite que caracteres especiais sejam representados por seqüências de escape, indicadas por três partes: um & inicial, um número ou cadeia de caracteres correspondente ao caracter desejado, e um ; final. Quatro caracteres ASCII - <, >, e & têm significados especiais em HTML, e são usados dentro de documentos seguindo a correspondência: Entidade Caracter < < > > & & Outras sequências de escape suportam caracteres ISO Latin1. Aqui está uma tabela com os caracteres mais utilizados em Português: Entidade Caracter á á â â à à ã ã ç ç é é ê ê í í ó ó ô ô õ õ ú ú ü ü Entidade Caracter Á Á Â Â À À Ã Ã Ç Ç É É Ê Ê Í Í Ó Ó Ô Ô Õ Õ Ú Ú Ü Ü Como vemos, as sequências de escape são sensíveis à caixa. Os editores de HTML fazem essa tradução automaticamente. Alguns editores, no entanto, mantêm a acentuação, sem usar as entidades de formatação. Quando isso acontece, deve-se inserir uma indicação do esquema de codificação ISO Latin1, escrevendo:<HTML> <HEAD> <TITLE>...</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> </HEAD> ... Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo, ©, que é o símbolo ©, ® para ®, e § para §. Também se pode usar seqüências com códigos ASCII, por exemplo: ¿Qué pasa, señor? ¿Qué pasa, señor? Cores e fontes Cores As cores são introduzidas através do elemento <FONT>, usando o sistema RGB para cores (da mesma forma que vimos para cores de documentos): <FONT COLOR="#rrggbb">Texto</FONT> Assim, um trecho de texto pode ter uma cor diferente da definição geral de cores, feita através dos atributos de <BODY>. Tamanho A formatação <FONT SIZE=tamanho_da_letra>Texto</FONT> permite que o autor do documento altere o tamanho das letras em trechos específicos de texto. O tamanho básico dos textos é 3. Podemos indicar tamanhos relativos a esse, por exemplo:<FONT SIZE=+2>Letra maior</FONT> Letra normal <FONT SIZE=-2>Letra menor</FONT> Letra maior Letra normal Letra menor Fontes Uma evolução que permite a escolha da fonte para os textos, é o atributo FACE: <FONT FACE
