Imagens
Inserção de Imagens
Incluir uma imagem na sua página é bem simples. Só se exige que você tenha
disponível a imagem que será exibida, e que ela esteja no formato aceito pelo
navegador(browser). O formato mais usado e aceito pela WEB é o GIF (Graphics
Interchange Format) e é aceito em diferentes plataformas de Hardware, tais como
PC e o Machintosh. Outro formato bastante usado é o JPEG (Joint Photographic
Engineering Group).
Mas atenção: Não encha sua página com imagens e procure convertê-las em
tamanhos pequenos, pois com excesso de imagens e com tamanhos muito grande o
usuário pode ter dificuldades em carregar a página. Um exemplo é esta página que
você visita agora!
<<<<<=========Imagem JPEG
Imagem GIF============>>>
É o Tag usado para inserir uma imagem na posição atual.
Sintaxe:<IMG SRC="Nome da imagem">
Se não for especificada uma URL, o browser procura a imagem diretório atual. Caso a imagem esteja em um diretório diferente ao do documento, é necessário indicar o diretório onde ela se encontra, através de "Nome_do_diretório". Se minha figura estiver na pasta Minhas Imagens e seu nome for Mafia com formato GIF então devemos usar a seguinte sintaxe:
<IMG SRC="C:\minhas imagens\mafia.gif">
Ou seja é preciso indicar o caminho completo até a figura.
Dica: Para que você trabalhe com mais tranqüilidade é ideal todos os documentos de sua página estejam em um mesmo diretório.Por exemplo: Crie uma pasta com o nome Imagens e coloque todas as imagens lá. Para a construção de uma página é imprescindível organização.
basta colocar alt="texto" dentro da tag <img src="nome da imagem">. Passe o mouse sobre as figuras dessa página e verá o resultado.
Exemplo:<img src="nome da imagem" alt="Informativo">
align="right" - a imagem fica alinhada a direita e o texto flui ao redor da imagem pela esquerda.
Exemplo:
<img src="C:\Leandro\Meus documentos\Minhas Webs\images\odie2.gif" align=right alt="Imagem do Odie">
Texto a esquerda e figura a direita.
============================================>>>
align="left" - a imagem fica alinhada à esquerda e o texto a direita.
<img src="C:\Leandro\Meus documentos\Minhas Webs\images\garfield39.gif" align=right alt="Imagem do Garfield">
Texto a direita e imagem a esquerda.
Ao usar os alinhamentos left e right, você poderá também adicionar a distância horizontal e vertical entre a figura e o texto.
hspace==>Distância horizontal.
vspace==>Distância vertical.
Outros tipos de alinhamento para figuras:
align="top" - alinha ao topo do texto;Teste todos os Tags acima para ver o resultado.
Este comando simplesmente coloca uma imagem de fundo para sua página. Sua sintaxe é:
<BODY BACKGROUND="diretório da imagem">
O diretório da imagem funciona no mesmo esquema do que o de inserção de figuras. Lembre-se que o background deve estar junto ao body e que você deve optar entre a cor de fundo ou a imagem. Os formatos aceitos são os mesmos para imagens.
Carregamento de imagem por opção
Colocar imagem é interessante, mas seu carregamento pode se tornar lento, em especial com imagens muito grandes. Uma técnica muito útil é fazer um link utilizando o comando <a href>. Dessa forma o usuário clica na imagem que deseja visualizar eliminando o tempo de carga automático.
Sintaxe:
<a href="nome da imagem">Texto</a>
Exemplo:
<a href="images\chines23.jpg">Clique
aqui para visualizar a imagem</a>
Ao clicar sobre Clique aqui para visualizar a imagem será exibida no tamanho
natural. Para voltar clique em voltar do seu browser.
Clique aqui para visualizar a imagem
Toda linguagem necessita de colocação de comentários, eles servem para lembrar da programação e facilitar a leitura do programa. O comentário pode conter várias linhas e só são vistos no código fonte.
Sintaxe:
<!--Comentário-->
Exemplo:<!--A Máfia criou este material para ensinar as pessoas a programar em HTML-->
Pode parecer um pouco complicado escrever, mas se você praticar verá que é extremamente simples. Aconselho que você pratique e teste todas as Tags apresentadas. Nunca se esqueça de salvar seus arquivos com a extensão .html ou .htm e se tiver dúvidas mande-me um e-mail. Posso demorar a responder, porém tenha certeza de que vou responder!
Revendo alguns itens
1º Abra o Bloco de Notas. Clique em Editar e marque o item Mudança Automática de linha;
2º Digite o seguinte texto:
<html>
<!--Toda página Html deve iniciar com essa tag.-->
3º Digite :
<head>
<!--O cabeçalho deve ser delimitado pelas tags <head> e </head> -->
4º Digite:
<title>
<!--Onde deve ficar o título da página. -->
Feche com </title>.
Exemplo:
<title> teste html </title>
5º Digite:
</head> <!-- para fechar o cabeçalho da página -->
6º Digite:
<body>
<!--Onde deve ficar o corpo da sua página. -->
<!--*Você ainda pode definir uma cor de fundo usando o comando bgcolor ou colocar uma figura com o comando background.Exemplo:<body bgcolor="yellow"> -->
Depois deve inserir o título para o texto. Para isso você usará as tags <h1> e </h1>
Exemplo <h1> Revendo algumas Tags já estudadas</h1>
<!--*O tamanho vai de <h1> tamanho maior para <h6> tamanho menor. -->
7º Para colocar um texto digite :
<p> Texto aqui
Feche com </p>
Exemplo:
<p> Páginas Html podem ser criadas em qualquer editor ou processador de texto </p>
8º Colocando uma imagem :
Exemplo:
<img src="garfield39.gif" alt=" imagem do Garfield" height=270 width=240>
A imagem deve estar na mesma pasta que o arquivo Html. Ou aponte para a pasta certa. Img src é referente a imagem que precisar ser indicado sua extensão Gif ou Jpg. Alt é um texto alternativo enquanto a página é carregada ou quando se passa com o mouse sobre a figura.
Height e Width são as dimensões da figura em pixels, modifique a seu gosto. Se você não indicar as dimensões da figura excluindo height e width sua imagem terá o tamanho original.
9º Vamos fechar o corpo do texto e terminar com a tag de fechamento.
Exemplo:
</body>
</html>
10º Salve com extensão .html ou .htm .
Exemplo:
teste.html ou teste.htm
Abrindo e vendo o resultado. Abra seu navegador padrão( Internet Explorer ou Netscape). Clique em Arquivo /Abrir ou Abrir página/ Procurar . Abra a pasta onde você salvou sua página clique no arquivo html de sua página e de Ok. Lembrando que para atualizar sua página basta apenas abri- la no navegador padrão e clicar em Exibir/ Código de Fonte e fazer as modificações necessárias no código do documento Html não esquecendo de salva- lo.
