HTML

Multimédia: Imagem.

Todas as páginas da internet tem pelo menos uma imagem…

vamos começar por ver como se insere um fundo numa página:

<html>
<head>
<title>Página com imagem</title>
</head>>
<body background="imagemdefundo.jpg">
<font face="Arial" size="5">Imagem de fundo</font>
</body>
</html>

Temos como fundo da página a imagem indicada no parâmetro BACKGROUND. A imagem deve estar guardada na mesma pasta que a nossa página.
A imagem repete-se em padrão.
A cor do texto deve ser bem escolhida assim como a cor ou a imagem de fundo de maneira a tornar os textos bem visíveis.
Para colocar uma imagem no corpo da página utilizamos o ‘tag’ <img>.
Este ‘tag’ insere uma imagem no ponto onde é colocado, não tem tag de fechamento, visto não se tratar de um ‘tag’ de formatação.

Vamos agora colocar uma imagem na página.

<body bgcolor="#66CCFF">
<p>Olá, eu sou o Rafael</p>
<p><img src="rafael.jpg" alt="Rafael!"></p>
</body>

As Imagens são objetos inseridos no meio de texto, por isso deve ser organizadas:

<body bgcolor="#66CCFF">
<div align="center">
Olá, eu sou o Rafael.<img src="rafael.jpg" alt="Rafael">
Bem-vindos à minha página.
</div>
</body>

Vamos analisar a linha de código <img src="rafael.jpg" alt="Rafael">.

O parâmetro src (SouRCe) indica o ficheiro da imagem, deve ser um ficheiro .GIF ou .JPG e temos que ter atenção às maiúsculas e minúsculas do seu nome.
O parâmetro alt indica o texto que vai aparecer enquanto a imagem não aparece, ou quando passamos com o rato por cima da Imagem.

Podemos colocar uma imagem numa secção formatada pelo ‘tag’ <a>, de modo a criar uma link nessa imagem:

<body bgcolor="#66CCFF">
<p>Clique abaixo para continuar</p>
<p>
<a href="pagina2.htm"><img src="link.gif" border="4"></a>
</p>
</body>

Temos então uma link para ‘pagina2.html’ na imagem ‘link.gif’.
O parâmetro border define a largura da borda da imagem.
No caso de a imagem fazer uma hiperligação, a cor da borda é a cor por defeito, ou aquela que foi definida por <body link="…">, senão será igual à cor do texto.

Podemos ainda utilizar border="0" para suprimir a borda.

<body bgcolor="#66CCFF">
<img src=" rafael.jpg " border="0">
</body>

O parâmetro align="?" define o alinhamento da imagem.
Como em todos os parâmetros de alinhamento podemos utilizar: left, right ou center.
Na tag <img> para além dos parâmetros normais podemos também utilizar alguns mais específicos.

top: Ajusta a imagem á parte mais alta da linha.
absbottom: Coloca a borda inferior da imagem ao nível do elemento mais baixo da linha.
middle: Faz coincidir a base da linha de texto com o meio vertical da imagem.
absmiddle: Ajusta a imagem ao meio absoluto do texto.
bottom: Ajusta abaixo.

<body>
<img src="rafael.jpg" alt="Rafael" border="2" align="bottom">
Olá, eu sou o Rafael. Sejam bem-vindos à minha página. Olá, eu sou o Rafael. Sejam bem-vindos à minha página. Olá, eu sou o Rafael. Sejam bem-vindos à minha página. Olá, eu sou o Rafael. Sejam bem-vindos à minha página.
</body>

Testem os vários atributos e notem por exemplo que entre absbottom e bottom a diferença é muito pouca.

Podemos atribuir um tamanho á imagem através dos atributos, Height que define a altura da imagem em pixels e width que define a largura da imagem em pixels.

<body>
<div align="CENTER">
Olá, eu sou o Rafael.
<img src="rafael.jpg" alt="Rafael" border="2" align="bottom" width="100" height="150">
Sejam bem-vindos à minha página.
</div>
</body>

Ainda dentro da tag <img> temos os parâmetros vspace e hspace:

vspace , determina o espaço entre o texto e a imagem para cima e para baixo.

<body bgcolor="#66CCFF">
Olá, eu sou o Rafael. <br>
<img src="rafael.jpg" alt="Rafael" border="2" vspace="50"> <br>
Sejam bem-vindos à minha página.
</body>

hspace ,que determina o espaço entre o texto e a imagem para a esquerda e para a direita.

<body bgcolor="#66CCFF">
Olá, eu sou o Rafael.
<img src="rafael.jpg" alt="Rafael" border="0" hspace="50">
Bem-vindos à minha página.
</body>

Ainda falando de grafismo.

Para inserirmos uma linha horizontal, devemos utilizar a tag ímpar ( tag sem fechamento) <hr> (Horizontal Rules).

<body bgcolor="#66CCFF">
Olá, eu sou o Rafael.
<hr>
Bem-vindos à minha página.
</body>

Dentro da tag <hr> podemos usar os seguintes parâmetros:

size, determina a altura do tracejado da linha, e podemos utilizar um valor absoluto de "1" a "100".
width, define o tamanho da linha horizontalmente, em relação a página. Podemos utilizar um valor absoluto (em pixels) ou um valor relativo (em percentagem).
noshade, ao inserir este atributo é eliminada a sombra da linha, dando um efeito tridimensional.
align="left, center ou right", define um alinhamento para a linha.
color="código hexadecimal", define a cor da linha.

<body>
Olá, eu sou o Rafael.
<hr size="10" width="50%" align="center" color=”#ff0000” noshade>
</body>

Neste caso a linha tem 10 pixels de altura, metade do tamanho da página horizontalmente, alinhamento ao centro da página, cor vermelha e está sem sombra.


0|1|2|3|4|5|6|7|8|9|10|11|12|13|14