Desenvolvimento web I Aula 4 - Imagens e Cores · Aula 4 - Imagens e Cores Prof.: Marlon Marcon ... é align="bottom" ... bilidade e no aspecto geral. Uma boa escolha para as cores

Desenvolvimento web I

Aula 4 - Imagens e Cores

Prof.: Marlon Marcon

03/03/2011

1 Imagens

1.1 O elemento <img> e o atributo src

<html>

<body>

<img src="magoo.gif">

</body>

</html>

1.2 O atributo alt ou title

Os atributos alt e title usam-se para de�nir "texto alternativo" à imagem. Estetexto será mostrado em vez da imagem no caso de o browser não conseguirapresentá-la, e usa-se assim:

1

<img src="http://www.w3.org/Icons/WWW/w3c_home" alt="Ícone do W3C"><img src="http://www.w3.org/Icons/WWW/w3c_home" title="Ícone do W3C">

É importante ressaltar a diferença entre alt e tile. O atributo alt funcionasomente no Internet Explorer, já o atributo title é usado no Mozilla. Paraevitar problemas com a utilização desses atributos, utilize-os juntamente comono exemplo:

<img src="http://www.w3.org/Icons/WWW/w3c_home"

alt="Ícone do W3C" title="Ícone do W3C">

1.3 Elementos relacionados com imagens

Elemento Descrição<img> Insere uma imagem<map> De�ne um mapa sobre uma imagem (image map)<area> De�ne uma área clicável sobre um mapa de imagem

1.3.1 Exemplo

<html>

<head>

<title>Exemplo</title>

</head><body>

Uma imagem em formato gif:

<img alt="Senhor Magoo" src= "magoo.gif"

width="90" height="99">

Uma imagem em formato jpg:

<img alt="O Paraíso" src="praia.jpg">

Repare que em ambos os casos a imagem é inseridado mesmo modo.

</body>

</html>

2

1.3.2 Utilizando uma imagem de fundo

<html>

<head>


</head><body background="bg-pegadas.jpg">

<h3>Uma imagem de fundo</h3>Os fundos de imagem tanto podem ser criados comimagens do tipo jpg como gif ou png. Se a imagem de fundo tiver dimensões inferioresàs da janela do browser ela será repetida (formandoum mosaico) até preencher todo o fundo da página.

</body>

</html>

3

1.3.3 Como alinhar uma imagem com o texto

<html>

<head>


</head><body>

Uma imagem <img alt="O Paraíso" src="praia.jpg"

align= "bottom"> misturada com texto


align= "middle"> misturada com texto


align= "top"> misturada com texto



Nota: O valor do alinhamento por omissãoé align="bottom"

Uma imagem <img alt="O Paraíso" src="praia.jpg"

align= "bottom"> misturada com texto



<img alt="O Paraíso" src="praia.jpg" align="bottom">Uma imagem antes do texto

4



Uma imagem depois do texto<img alt="O Paraíso" src= "praia.jpg" align="bottom">



</body>

</html>

1.3.4 Como fazer com que uma imagem �utue à esquerda ou à direitade um parágrafo

<html>

<head>


5

</head>

<body>



<img alt="Magoo" src="magoo.gif" align="left">Aqui temos um parágrafo com uma imagem. O atributoalign tem o valor "left", deste modo, a imagem deveflutar à esquerda do texto.



<img alt="Magoo" src="magoo.gif" align="right">Aqui temos um parágrafo com uma imagem. O atributoalign tem o valor "right", deste modo, a imagem deveflutar à direita do texto.



</body>

</html>

1.3.5 Como ajustar o tamanho de uma imagem

<html>

<head>


</head><body>

<img alt="Caminho para peões" src="caminho.jpg"

width= "75" height="50">

6







Nota: Para alterar o tamanho de uma imagemutilize os atributos "height" (altura) e "width" (largura).



</body>

</html>

1.3.6 Como juntar texto alternativo (visível quando não é possívelmostrar a imagem)

<html>

<head>


</head><body>

7



<img alt="Magoo o pitosga" src="magoo.fif" align="left">O web browser não consegue encontrar a imagem "magoo.fif".Por isso escreve o texto alternativo dado através doatributo alt.



</body>

</html>

1.3.7 Colocar uma ligação sobre uma imagem

<html>

<head>

<title>Exemplo</title> </head>

<body>

 Uma imagem com uma ligação ("link"):<a href="http://www.um_paraiso.com"><img alt="Paraíso" src="praia.jpg" border="0"></a>

</body>

</html>

8

1.3.8 Crie um mapa sobre uma imagem com diferentes áreas sensí-veis a cliques

<html>

<head>


</head><body>

Clique sobre a área 1.<img src="rects.gif" usemap="#rectangulos" border="0"><map id="rectangulos" name="rectangulos"><area shape="rect" coords="0,0,56,120"

href= "javascript:alert('área 1')" alt="Área 1">

<area shape="rect" coords="56,0,248,42"

href= "javascript:alert('área 2')" alt="Área 2"> </map>

Nota: O atributo "usemap" utilizado com oelemento img refere-se ao atributo "id" ou ao atributo"name" (depende do browser) existente num elemento map.Por isso temos, se queremos garantir a compatibilidadeda página com todos os browsers, devemos aplicar ambosos atributos ("id" e "name") ao elemento <map>.

</body>

</html>

9

2 Cores

Uma cor ou uma imagem de fundo bem escolhidos podem melhorar o aspectoda página, mas uma má escolha é capaz de causar danos muito graves na legi-bilidade e no aspecto geral.

Uma boa escolha para as cores de fundo e do texto

<html>

<head>


</head>

<body style="background-color: #d0d0d0; color: black">

Neste exemplo a cor escolhida para o fundo é adequadaporque permite ler o texto com facilidade. 

</body>

</html>

10

Uma má escolha para as cores de fundo e do texto

<html>

<head>


</head><body style="background-color: white; color: yellow">

Neste exemplo a cor escolhida para o fundo é desadequadaporque não permite ler o texto com facilidade. 

</body>

</html>

2.1 O atributo bgcolor do elemento <body>

O elemento <body> possui atributos que nos permite especi�car as cores dotexto e a cor de fundo. Também podemos usar uma imagem como padrão defundo.

11

<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">

2.2 O atributo background

O atributo "background" estabelece que o padrão de fundo da página é dado poruma imagem. O valor deste atributo indica o local onde se encontra a imagem.Se as dimensões da imagem forem inferiores às dimensões da página, o browserrepetirá a imagem (como num chão de mosaicos ou numa parede de azulejos)de modo a ocupar todo o fundo da página. O quadro seguinte mostra como issose faz:

<body background="clouds.gif"><body background="http://www.meusite.com/clouds.gif">

O valor do atributo background é um URL que de�ne o local onde pode serencontrada a imagem. Na primeira linha mais acima demos um URL relativo ena segunda demos um URL absoluto.

2.3 Dicas

Sempre que usar uma imagem de fundo considere os seguintes aspectos:

• Certi�que-se de que o tamanho da imagem (em KBytes) não é muitogrande, o que aumentaria o tempo de carregamento da página.

• Certi�que-se de que a imagem de fundo combina bem com a cor do texto.

• Certi�que-se de que o fundo combina bem com as outras imagens que temna página.

• Veri�que se da repetição a imagem de fundo em mosaico resulta um padrãoperfeito. Se detectar falhas ao passar de um mosaico para o seguinte nãouse essa imagem.

• Certi�que-se de que a imagem não incomoda e não desvia a atenção dotexto.

2.4 Formas de exprimir cores

A tabela seguinte mostra os resultados de diversas combinações de cores:

12

2.4.1 Nomes das cores

Apesar de não estarem de�nidos o�cialmente, os nomes de cor apresentadosa seguir são reconhecidos por todos os browsers relevantes com exceção dasversões muito antigas.

2.4.2 Formas de exprimir os valores das cores

As cores de�nem-se usando notação hexadecimal que exprime as quantidadesde vermelho (Red), verde (Green) e azul (Blue) que entram na sua composição.A quantidade mínima de uma dada cor é 0 (#00 em notação hexadecimal)e a quantidade máxima é 255 (#FF em notação hexadecimal.) Assim, a corbranca escreve-se na forma #FFFFFF e a cor preta na forma #000000. Umaforma mais antiga que ainda funciona é a forma decimal. Na forma decimala cor branca exprimese como rgb(255,255,255) e a cor preta exprime-se comorgb(0,0,0). Entre estes dois extremos temos toda a gama de cores que podemser apresentadas num monitor de computador.

2.4.3 Códigos de cores

Valores de cor

13

http://www.w3schools.com/Html/html_colors.asp

Cores ordenadas por nome

http://www.w3schools.com/Html/html_colornames.asp

Cores ordenadas por valor hexadecimal

http://www.w3schools.com/Html/html_colorvalues.asp

14

Documents

Desenvolvimento web I Aula 4 - Imagens e Cores · Aula 4 - Imagens e Cores Prof.: Marlon Marcon ... é align="bottom" ... bilidade e no aspecto geral. Uma boa escolha para as cores