Elementos HTML 23
27 pág.

Elementos HTML 23


DisciplinaLógica I9.888 materiais140.996 seguidores
Pré-visualização7 páginas
Quanto aos valores 
atribuídos, eles são os mesmos que vimos para o alinhamento de parágrafo. Mesmo 
tendo sido definido um alinhamento dentro do bloco <div>, você pode ainda alinhar 
parágrafos específicos de forma diferente, abrindo exceções dentro do bloco. Mas 
depois que for novamente aplicada a tag <p> sem esse alinhamento particular, volta a 
funcionar o que foi estabelecido em <div>. Veja como funciona: 
<div align=&quot;right&quot;> 
<p>Este parágrafo está alinhado à direita por causa da definição em div 
<p>Este também. 
<p align=&quot;left&quot;>Este está à esquerda. 
<p>Volta a definição feita em div 
</div> 
align 
Como atributo de <img> 
Define o alinhamento da imagem dentro da página e controla o fluxo do texto ao seu 
redor. Tal texto é o que é digitado imediatamente após a tag <img>. Descrevemos 
abaixo como isso funciona com cada um dos valores que podemos atribuir. 
bottom - A imagem coloca-se à esquerda do texto. O texto tem seu início 
na linha nivelada com o canto inferior direito da imagem. Este é o padrão, portanto não 
precisa ser especificado. 
Exemplo: <img src=&quot;imagem.gif&quot;>texto. 
left - A imagem coloca-se à esquerda da página. O texto tem seu início na 
linha nivelada com o canto superior direito da imagem, contornando-a. 
Exemplo: <img src=&quot;imagem.gif&quot; align=&quot;left&quot;>texto. 
right - A imagem coloca-se à direita da página. O texto tem seu início na 
linha nivelada com o canto superior esquerdo da imagem, contornando-a. 
Exemplo: <img src=&quot;imagem.gif&quot; align=&quot;right&quot;>texto. 
top - A imagem coloca-se à esquerda do texto. O texto tem seu início na 
linha nivelada com o canto superior direito da imagem. Apenas uma linha fica ao lado 
da imagem, sendo que o resto do texto passa a fluir por baixo a partir da margem 
esquerda da página. É de se notar que esse tipo de alinhamento é mais útil com pouco 
texto. 
Exemplo: <img src=&quot;img.gif&quot; align=&quot;top&quot;>texto. 
middle - A imagem coloca-se à esquerda do texto. O texto tem seu início 
na linha nivelada com o ponto central da imagem (sentido vertical). Apenas uma linha 
fica ao lado da imagem, sendo que o resto do texto passa a fluir por baixo a partir da 
margem esquerda da página. Como em top, esse alinhamento também é mais útil com 
pouco texto. 
Exemplo: <img src=&quot;imagem.gif&quot; align=&quot;middle&quot;>texto. 
O alinhamento de uma imagem dentro da página pode ser feito também utilizando o 
atributo align na tag <p> ou <div>, mas a definição em <img>, se for left ou right, irá 
prevalecer. 
Já os valores bottom, middle e top apenas controlam o fluxo do texto e, com eles, o 
alinhamento da imagem obedece ao que foi definido em <p> ou <div>, sendo que o 
padrão é left. Podemos esclarecer isso melhor através de alguns exemplos, onde fizemos 
a combinação do alinhamento definido em <p> com o alinhamento definido em <img>. 
 
<p align=&quot;right&quot;><img src=&quot;imagem.gif&quot; align=&quot;middle&quot;>pouco 
texto</p> 
<p align=&quot;right&quot;><img src=&quot;imagem.gif&quot; align=&quot;top&quot;>pouco texto</p> 
<p align=&quot;center&quot;><img src=&quot;imagem.gif&quot; align=&quot;middle&quot;>pouco 
texto</p> 
<p align=&quot;center&quot;><img src=&quot;imagem.gif&quot; align=&quot;top&quot;>pouco 
texto</p> 
Observação: 
Você pode interromper o fluxo do texto ao lado da imagem, fazendo-o passar para a 
parte de baixo antecipadamente, com a utilização do atributo clear na tag <br>. 
face 
Como atributo de <font> 
Define a fonte do texto, como arial, verdana, etc. O padrão costuma ser Times New 
Roman, dependendo do navegador. Você deve preocupar-se em colocar uma fonte mais 
comum, porque pode ser que o visitante não tenha a que você escolheu instalada em seu 
computador. Caso ocorra isso, o texto será exibido com a padrão. 
Exemplos: 
<font face=&quot;arial&quot;> 
<font face=&quot;Comic Sans MS,arial,verdana&quot;> 
Pelo segundo exemplo, você percebe que pode especificar mais de uma fonte, para que 
o navegador escolha a primeira, se encontrá-la, e se não encontrar, coloque a segunda e 
assim por diante. Neste caso você não pode deixar de colocar o valor do atributo entre 
aspas que em alguns casos são opcionais. Quando um atributo possui espaços em seu 
interior as aspas passam a ser necessárias. No caso exemplificado, não fossem colocadas 
as aspas, o navegador entenderia que o nome da primeira fonte é apenas Comic. Note 
que tem de ser apenas um par de aspas, englobando todos os nomes. 
Observação: 
Quando você coloca a tag <font> com os atributos face, size e color em qualquer ponto 
do documento, a partir daí todo o texto terá essa fonte até encontrar o fechamento 
</font>, exceto o conteúdo das tabelas. O texto antes e depois de uma tabela terá a fonte 
que você definiu, mas o texto dentro de suas células terá a fonte padrão. Então, é preciso 
definir a fonte dentro de cada célula, ou seja, utilizar as tags <font> e </font> entre <td> 
e </td>. 
size 
Como atributo de <font> 
Define o tamanho da fonte do texto. Existem 7 tamanhos numerados de 1 a 7 por ordem 
crescente. Portanto, se especificarmos size=&quot;1&quot;, teremos o menor tamanho e, se 
especificarmos size=&quot;7&quot;, teremos o maior. Você notará que esses números não 
coincidem com os números que identificam o tamanho da fonte em seu processador de 
textos, como o Word, onde encontramos, por exemplo, tamanhos 10, 12, etc. Aqui é 
uma escala de 1 a 7 que vigora. 
Exemplo: <font size=&quot;2&quot;>. 
Existe também outra maneira de especificar esse tamanho de fonte. Podemos modificar 
o tamanho definido anteriormente utilizando os sinais + e -. 
Eis um exemplo: 
<font size=&quot;=+1&quot;> 
No caso deste último exemplo, se o tamanho anterior era 2, passa a ser três. Ou seja, 
você pode aumentar ou diminuir o tamanho, em vez de especificar outro. 
Observação: 
Quando você coloca a tag <font> com os atributos face, size e color em qualquer ponto 
do documento, a partir daí todo o texto terá essa fonte até encontrar o fechamento 
</font>, exceto o conteúdo das tabelas. O texto antes e depois de uma tabela terá a fonte 
que você definiu, mas o texto dentro de suas células terá a fonte padrão. Então, É 
preciso definir a fonte dentro de cada célula, ou seja, utilizar as tags <font> e </font> 
entre <td> e </td>. 
size 
Como atributo de <hr> 
Define a espessura da linha horizontal criada. Pode ser um número de 1 a 100. 
Especificando um número maior que 100, será entendido como 100. 
Exemplos: 
<hr size=&quot;5&quot;> 
<hr size=&quot;10&quot;> 
color 
Como atributo de <font> 
Define a cor da fonte do texto. Pode-se usar o nome da cor, o código hexadecimal no 
formato #rrggbb ou o código decimal no formato rgb(x,x,x). Neste último formato, x 
pode ser um número de 0 a 255 ou um percentual de 0% a 100%. 
Exemplos: 
<font face=&quot;arial&quot; size=&quot;2&quot; color=&quot;green&quot;> 
<font face=&quot;arial&quot; size=&quot;2&quot; color=&quot;#00FF00&quot;> 
<font face=&quot;arial&quot; size=&quot;2&quot; color=&quot;rgb(0,255,0)&quot;> 
<font face=&quot;arial&quot; size=&quot;2&quot; color=&quot;rgb(0%,100%,0%)&quot;> 
Note que o símbolo # no início do código hexadecimal é obrigatório. 
Observações: 
1. Muitas vezes você não poderá utilizar o nome das cores, porque poucas têm um 
nome reconhecido pelo navegador. É recomendável que se utilize sempre o 
código hexadecimal. 
2. Se a definição da cor não for feita em <font> (ou, se feita, mas depois fechada 
com </font>), o texto será apresentado na cor padrão que é o preto (black ou 
#000000) ou a definida no atributo text de <body>. 
3. Ao definirmos uma cor para o texto, devemos considerar a cor que foi escolhida 
como fundo, para que ocorra o devido contraste entre ambas e fique assegurada 
a nitidez dos caracteres. Assim, um fundo de cor clara exige uma cor escura para 
o texto, já um fundo de cor escura exige uma cor clara. 
4. Quando você coloca a tag <font> com os atributos face, size e color em qualquer 
ponto do documento, a partir daí todo o texto terá essa fonte até encontrar o 
fechamento </font>, exceto o conteúdo das tabelas. O texto antes e depois de 
uma tabela terá a fonte que você definiu, mas o texto dentro de suas células terá 
a fonte padrão. Então, É preciso definir a fonte dentro de cada célula,