FORMATANDO O TEXTO
Além de tudo relativo à organização dos parágrafos, um dos aspectos primordiais da formatação de um
texto, é o da própria letra. É muito comum e prático, apresentar o texto ressaltado em negrito, itálico e
outros. Paralelamente, o uso de índices e subíndices é vital para a publicação de textos científicos. Tudo
isso e muito mais, é possível por meio do HTML a partir de uma série de etiquetas entre as quais vamos
destacar algumas.
Negrito
Podemos escrever o texto em negrito o incluindo dentro das etiquetas <b> e </b> (bold). Esta mesma
tarefa é desempenhada por <strong> e </strong> sendo ambas equivalentes. Nós nos inclinamos pelas
primeiras por uma simples razão de esforço.
Escrevendo um código deste tipo:
<b>Texto em negrito</b>
Obteremos este resultado:
Texto em negrito
Itálico
Também neste caso existem duas possibilidades, uma curta: <i> e </i> (italic) e outra um pouco mais
longa: <em> e </em>. Neste manual, e na maioria das páginas que se vê por aí, é normal encontrar com
a primeira forma que é sem dúvida mais simples para escrever e para se lembrar.
Abaixo, um exemplo de texto em itálico:
<i>Texto em itálico</i>
Que dá o seguinte efeito:
Texto em itálico
Sublinhado
O HTML nos propõe também para o sublinhado as etiquetas: <u> e </u> (underline). Entretanto o uso do
sublinhado deve ser usado com muita precaução visto que os links hipertextos vão, a não ser que se
indique o contrário, sublinhados com o que podemos confundir o leitor e afastá-lo do verdadeiro
interesse de nosso texto.
Subscrito e sobrescrito
Este tipo de formato é de extrema utilidade para textos científicos. As etiquetas empregadas são:
<sup> e </sup> para os sobrescritos
<sub> e </sub> para os subscritos
Temos aqui um exemplo:
A <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>CINOS é um heterociclo alergeno enriquecido
O resultado seria:
A ¹³CC3H4CINOS é um heterociclo alergeno enriquecido.
Combinar etiquetas
Todas estas etiquetas, incluindo as que já vimos e as que ainda vamos ver, podem ser combinadas
estando umas dentro das outras de forma que conseguimos resultados diferentes. Assim, podemos sem
nenhum problema criar um texto em negrito e em itálico colocando uma etiqueta dentro da outra:
<b>Isto só está em negrito<i>e isto em negrito e itálico</i></b>
Isto daria:
Isto só está em negrito e isto em negrito e itálico
COR, TAMANHO E TIPO DE LETRA
Apesar de que por razões de homogeneidade e simplicidade de código estes tipos de formatos são
controlados atualmente por folhas de estilo cascata (das quais já teremos tempo de falar), existe uma
forma clássica e direta de definir cor, tamanho e tipo de letra de um determinado texto.
Isto se faz a partir da etiqueta <font> e seu fechamento correspondente. Dentro desta etiqueta devemos
especificar os atributos correspondentes a cada um destes parâmetros que desejamos definir. A seguir
comentamos os atributos principais desta etiqueta:
Atributo face
Define o tipo de letra. Este atributo é interpretado por versões do Netscape a partir da 3 e de MSIE 3 ou
superiores. Outros navegadores as ignoram completamente e mostram o texto com a fonte que utilizam.
Deve-se ter cuidado com este atributo já que cada usuário, dependendo da plataforma que utilize, pode
não dispor dos mesmos tipos de letra que nós com o que, se nós escolhemos um tipo do que não dispõe,
o navegador se verá forçado a mostrar o texto com a fonte que utiliza por padrão (que costuma ser Times
New Roman). Para evitar isso, dentro do atributo costuma-se selecionar vários tipos de letras separados
por vírgulas. Neste caso, o navegador comprovará que dispõe do primeiro tipo numerado e se não for
assim, passará para o segundo e assim sucessivamente até encontrar um tipo que possua ou então, até
acabar a lista e colocar a fonte padrão. Vejamos um exemplo:
<font face="Comic SansMS,arial,verdana">Este texto tem outra tipografia</font>
Que se visualizaria assim em uma página web:
Este texto tem outra tipografia
Atributo size
Define o tamanho da letra. Este tamanho pode ser absoluto ou relativo.
Se falarmos em términos absolutos, existem 7 níveis de tamanhos distintos numerados de 1 a 7 por
ordem crescente. Escolheremos portanto um valor size="1" para a menor letra ou size="7" para a maior.
<font size=4>Este texto é maior</font>
Que se visualizaria assim em uma página web:
Este texto é maior
Podemos também modificar o tamanho de nossa letra em relação ao do texto mostrado anteriormente
definindo o número de níveis que queremos subir ou descer nesta escala de tamanhos por meio do signo
+ ou - . Desse modo, se definimos nosso atributo como size="+1" o que queremos dizer é que
aumentamos um nível o tamanho da letra. Se estávamos escrevendo previamente em 3, passaremos
automaticamente a 4.
Os tamanhos reais que vermos na tela dependerão da definição e do tamanho da fonte escolhido pelo
usuário no navegador. Este tamanho de fonte pode ser definido no Explorer indo ao menu superior,
Exibir/Tamanho da fonte. No Netscape escolheremos View/Text Size. Esta flexibilidade pode acabar
sendo embaraçosa para nós em mais de uma ocasião, já que em muitos casos desejaremos que o
tamanho do texto permaneça constante para que este caiba em um determinado espaço. Veremos em
seu momento que esta pré-fixação do tamanho pode ser realizada pelas folhas de estilo em cascata.
Atributo cor
A cor do texto pode ser definida através do atributo cor. Cada cor é por sua vez definida por um número
hexadecimal que está composto por três partes. Cada uma destas partes representa a contribuição do
vermelho, verde e azul à cor em questão.
Por outro lado é possível definir de uma maneira imediata algumas das cores mais freqüentemente
usadas para as que se criaram um nome mais memotécnico:
Nombre Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
<font color="red">Este texto está em vermelho</font>
Que se visualizaria assim em uma página web:
Este texto está em vermelho
Com tudo isso, já somos capazes de criar um texto formatado de uma forma realmente elaborada.
Colocamos então em prática tudo o que aprendemos nestes capítulos fazendo um exercício consistente
em uma página que tenha as seguintes características:
· Um título com cabeçalho de nível 1, em itálico e na cor verde oliva.
· Um segundo título com cabeçalho de nível 2, também na cor verde oliva.
· Todo texto da página deverá apresentar-se com uma fonte diferente da fonte padrão. Por
exemplo, "Comic Sans MS" e no caso de que esta não esteja no sistema, que se coloque a fonte
"Arial".
Atributos para páginas
As páginas HTML podem ser construídas com uma variedade de atributos que lhe podem dar um aspecto
à página muito personalizado. Podemos definir atributos como a cor de fundo, a cor do texto ou dos links.
Estes atributos se definem na etiqueta <body> e, como dizíamos são gerais a toda a página.
O melhor para explicar seu funcionamento é vê-los um a um.
Atributos para fundos
Bgcolor:
especificamos uma cor de fundo para a página. No capítulo anterior aprendemos a construir
qualquer cor, com seu nome ou seu valor RGB. A cor de fundo que podemos atribuir com bgcolor é uma
cor plana, ou seja, a mesma para toda a superfície do navegador.
Background:
serve para indicar a colocação de uma imagem como fundo da página. Nos capítulos mais
adiante, veremos como se inserem imagens com HTML e os tipos de imagens que se podem utilizar.
EXEMPLO DE FUNDO
Vamos colocar esta imagem no fundo da página.
A imagem chama-se fundo.jpg e supomos que se encontra no mesmo diretório que a página. Neste caso
se colocaria a seguinte etiqueta <body>
<body background="fondo.jpg">
Pode-se ver o efeito de colocar este fundo em uma página a parte.
Cor do texto
Text: Este atributo serve para atribuir a cor do texto da página. Por padrão é o negro.
Ademais da cor do texto, temos três atributos para atribuir a cor dos links da página. Já devemos saber
que os links devem diferenciar-se do resto do texto da página para que os usuários possam identificá-los
facilmente. Para isso, eles costumam aparecer sublinhados e com uma cor mais viva que o texto. Os três
atributos são os seguintes:
Link: a cor dos links que não foram visitados.
Vlink: a cor dos links visitados. A letra "v" vem justamente da palavra visitado. É a cor que terão os links
que já visitamos. Por padrão sua cor é roxa. Esta cor deverá ser um pouco menos viva que a cor dos links
normais.
Alink: é a cor dos links ativos. Um link está ativo no preciso momento em que se clica. Às vezes é difícil
perceber quando um link está ativo porque no momento em que se ativa, é porque o estamos clicando e
nesse caso, o navegador abandonará a página rapidamente e não poderemos ver o link ativo mais que
um mínimo instante.
Exemplo de cor de texto
Vamos ver uma página em que a cor de fundo seja preta, e as cores dos textos e dos links sejam claros.
Colocaremos a cor do texto branca e os links amarelos, mais ressaltados os que não tenham sido
visitados e menos ressaltados os que já tenham sido. Para isso, escreveríamos a etiqueta body assim:
<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="ffffcc" alink="ffff00">
O efeito pode-se ver em uma página a parte.
MARGENS
Com outros atributos da etiqueta <body> podem-se atribuir espaços de margens nas páginas, o que é
muito útil para eliminar as margens em branco que aparecem nos lados, em cima e embaixo da página.
Estes atributos são diferentes para o Internet Explorer e para o Netscape Navigator, por isso, devemos
utilizá-los todos se queremos que todos os navegadores os interpretem perfeitamente.
Leftmargin: para a indicar a margem nos lados da página. Válido para Internet Explorer.
Topmargin: para indicar a margem acima e abaixo da página. Para Internet Explorer.
Marginwidth: a contrapartida de leftmargin para Netscape. (margem nos lados)
Marginheight: igual ao topmargin, mas para Netscape. (margem acima e abaixo)
Um exemplo de página sem margem é a própria página de andrecavalcante.com que você está visitando
atualmente. (pelo menos na hora de escrever este artigo). Além disso, vamos ver outra página sem
margens, caso alguém necessite ver o exemplo nestas linhas:
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff">
<table width=100% bgcolor=ff6666><tr><td>
<h1>Olá amigos</h1>
<br>
<br>
Obrigado por me visitar!
</td></tr></table>
</body>
Esta página tem o fundo branco e dentro um painel com o fundo vermelho. Na página poderemos ver que
o painel ocupa o espaço na página sem deixar lugar para nenhum tipo de margem. Pode-se ver o
exemplo em uma página à parte.
Nenhum comentário:
Postar um comentário