| Criadores |
| Fábio
Azevedo, 28 anos, paulistano, webmaster. Veja mais. |
| |
| Felipe
Braga de Oliveira, 26 anos, paulistano, contador. Veja mais. |
| |
| Luisa
Haddad, 22 anos, paulista, webdesigner. |
| |
| Ludmila Simões, 28 anos, jacareiense, webdesigner. Veja mais. |
| |
| Objetivo |
| Este
projeto foi desenvolvido como atividade curricular da materia 'Fundamentos
Web' do primeiro semestre do curso de graduação 'Sistemas para internet / Desenvolvimento web' da faculdade de tecnologia IBTA. |
| |
| Desenvolvimento |
| Utilizamos como ferramenta para a construção deste site o Dreamweaver. Este site foi desenvolvido totalmente em HTML como sendo um dos pré-requisitos para este trabalho. |
| |
|
| |
4.
imagens
|
carregar imagem
A etiqueta de inserção de imagem é vazia <img>. Ela necessita do atributo indispensável SRC, que é o caminho para se chegar até a tal imagem – a fonte ou o “SouRCe”.
Você pode inserir dois tipos de imagens (JPG e GIF).
| |
<img scr""> |
 |
 exemplo: |
| |
<img src="caminhodafoto/foto.jpg"> |
|
| |
 |
|
alinhar imagem
Uma imagem pode ser inserida no meio de um texto, antes ou depois de um parágrafo ou como elemento de uma tabela. Mas para controlar como ela se posiciona em relação ao texto, usamos um outro atributo, ALIGN, que assume os valores TOP, BOTTOM, LEFT ou RIGHT.
alinhar no topo
| |
<align="top"> |
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" align="top">
|
|
| |
| Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! |
|
|
alinhar no rodapé
| |
<align="bottom"> |
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" align="bottom"> |
|
| |
| Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! |
|
|
alinhar a esquerda
| |
<align="left"> |
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" align="left"> |
|
| |
| Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! |
|
|
alinhar a direita
| |
<align="right"> |
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" align="right"> |
|
| |
| Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! |
|
|
tamanho
Você pode também alterar a exibição da imagem na tela com os atributos Height e Width. Mas nenhum desses comandos realmente altera o tamanho da imagem, então cuidado: nada de reduções drásticas, edite sua imagem se ela for muito maior do que o espaço que ela ocupará na tela!
| |
<width=""> horizontal
<height=""> vertical |
|
Tamanho forçado (imagem distorcida):
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" width="90px" height="130px"> |
|
| |
|
|
Tamanho normal da imagem:
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" width="160px" height="100px"> |
|
| |
|
|
borda
Para alterar ou zerar o tamanho da borda da figura, você utilizará o atributo border.
| |
<border=""> |
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" border="10"> |
|
| |
|
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" border="5"> |
|
| |
|
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" border="1"> |
|
| |
|
|
margens
Para que sua imagem não fique colada ao texto, utilize os atributos hspace e vspace. (H de horizontal e V de vertical.).
| |
<hspace="">
<vspace=""> |
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" vspace="10" hspace="20"> |
|
| |
| Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! |
|
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" vspace="5" hspace="5"> |
|
| |
| Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! |
|
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" vspace="0" hspace="0"> |
|
| |
| Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! |
|
|
alternative
O atributo ALT serve para fazer aparecer aquele texto que certamente já viu em várias páginas, quando posicionou o ponteiro do mouse sobre uma imagem. Com ele, mesmo que a imagem não possa ser carregada por um motivo qualquer o leitor poderá ter alguma noção do que você queria com ela.
| |
<alt=""> |
|
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" alt="Texto alternativo"> |
|
| |
|
|
papel de parede
Uma imagem também pode ser utilizada como plano de fundo para a página inteira. Para isso usamos o atributo BACKGROUND para a etiqueta </body>.
Se a imagem for pequena ela irá se repetir como um carimbo ao longo da página
.
| |
<backgroud=""> |
|
conclusão
Você pode utilizar mais de uma opção.
| exemplo: |
| |
<img src="caminhodafoto/foto.jpg" align="left" width="160px" height="100px" border="0" hspace="10" vspace="0" alt="Texto alternativo"> |
|
| |
| Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! Aqui vai texto! |
|
|
|
| |
|
|
carregar