Elementos HTML 23
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="right"> <p>Este parágrafo está alinhado à direita por causa da definição em div <p>Este também. <p align="left">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="imagem.gif">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="imagem.gif" align="left">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="imagem.gif" align="right">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="img.gif" align="top">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="imagem.gif" align="middle">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="right"><img src="imagem.gif" align="middle">pouco texto</p> <p align="right"><img src="imagem.gif" align="top">pouco texto</p> <p align="center"><img src="imagem.gif" align="middle">pouco texto</p> <p align="center"><img src="imagem.gif" align="top">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="arial"> <font face="Comic Sans MS,arial,verdana"> 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="1", teremos o menor tamanho e, se especificarmos size="7", 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="2">. 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="=+1"> 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="5"> <hr size="10"> 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="arial" size="2" color="green"> <font face="arial" size="2" color="#00FF00"> <font face="arial" size="2" color="rgb(0,255,0)"> <font face="arial" size="2" color="rgb(0%,100%,0%)"> 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,