Início
1
Curso de HTML - Aula 5 - Inserindo Imagens Qui 20 Dez 2012, 20:07
Halt
Administrador
Mensagens : 1662
AP's : 2147483645
Respeito : 61Idade : 24
Localização : Rio de Janeiro
[Autor: Gleison]
GIF: O principal formato caracteriza-se pelo pequeno tamanho, tamanho esse proporcionado por ter um limite Maximo de 256 cores, ou seja, se sua imagem tem menos de 256 cores o ideal é salva-la em GIF porem se tiver mais de 256 na hora de salvar a imagem irá perder cores, caso tenha muitas cores isso acarretará numa perda considerável de qualidade.
Outra característica é o Canal “Alpha” de transparência, como assim. Toda imagem em um com**Censurado**dor nada mais é que um “quadrado”, quando encontramos uma imagem que aparentemente não tem esse formato é porque o restante que forma o quadrado está com uma cor transparente, e é isso que o GIF. Tem com ele você pode criar uma imagem que aparentemente não é um quadrado
JPEG: Este é o formato fotográfico, ou seja, nele não há limite de cores, sendo assim ideal para imagens com mais de 256 cores, o único inconveniente é que devido a qualidade costuma ter um tamanho relativamente grande.
Outra característica é a ausência do canal “Alpha” de transparência, ou seja, neste formato não se pode ter imagens que não sejam quadrados já que se ocorrer isso aquilo que deveria ser transparente ficará na cor Branca.
*PNG: Este é um novo formato que irá substituir o JPEG e o GIF futuramente, atualmente não é muito difundido e nem muito compatível com os navegadores. O PNG nada mais é do que a união do GIF e do JPEG, sendo assim em um documento PNG pode ter imagens com mais de 256 cores e com um fundo transparente.
OBS: O PNG AINDA NÃO E TOTALMENTE DIFUNDIDO, SENDO ASSIM AINDA NÃO É MUITO COMPATÍVEL COM MUITAS VERSÕES DE NAVEGADORES.
inserir o nome da sua imagem e o respectivo formato.
<HTML>
<head>
<title>Exercício 2</title>
</head>
<body>
<div align=”Center”>
<font face="Arial” color=”#FF0000” size=”10”>
<b><i>Curso de HTML</b></i></font></div><p>
<img src=”verdetela.jpg”></img><BR>
Este é o meu Segundo exercício de HTML,<BR>
E nele irei aprender a formatar o texto.
</body>
</HTML>
Salve seu arquivo e abra-o no navegador, veja que agora temos uma imagem após o texto em vermelho.
Volte ao ex2.html e adicione os seguintes tag para que fiquem como o abaixo.
<HTML>
<head>
<title>Exercício 2</title>
</head>
<body>
<div align=”Center”>
<font face="Arial” color=”# FF0000” size=”10”>
<*b><*i>Curso de HTML<*/i><*/b></font></div><p>
<img src=”verdetela.jpg” alt=”Minha Imagem” border=”3”></img><BR>
Este é o meu Segundo exercício de HTML,<BR>
E nele irei aprender a formatar o texto.
</body>
</HTML>
Salve seu arquivo e abra-o no navegador, posicione o mouse sobre a imagem veja que agora é exibida uma legenda na imagem com o texto “Minha Imagem” além de uma borda na imagem.
A resposta é simples, todo arquivo que inserimos no HTML é referenciado ou seja é chamado só que para isso devemos informar o local onde o arquivo está e para isso podemos fazer de dois jeito, são eles:
Referencia Absoluta ou Link Direto: Sua característica é colocar o endereço completo do arquivo. Entendendo melhor um exemplo dessa referencia ficaria assim: “http://www.meusite.com/minhaimagem.gif”, perceba que foi indicado o local exato do arquivo.
Referencia Relativa ou Link Relativo: Sua característica principal é colocar o arquivo na pasta da pagina ou dentro de outras pastas sendo que a pasta deverá estar junto da página. Entendendo melhor um exemplo dessa referencia ficaria assim:
“minhaimagem.gif”, perceba que não foi indicado o local exato do arquivo.
Outra forma de usar a relatividade e o link “imagens/verdetela.gif”, neste caso eu informei que o programa deve procurar a imagem dentro da pasta imagens que está junto da página.
Outra forma de usar a relatividade e o link ../verdetela.gif”, neste caso eu informei que o programa deve procurar a imagem dentro de uma pasta anterior da atual onde está o arquivo.
<HTML>
<head>
<title>Exercício 4</title>
</head>
<body>
<img src=”file:///c:/Documents and Settings/Gleison/Desktop/verdetela.jpg" alt=”Minha Imagem”></img>
</body>
</HTML>
Lembrando que o caminho aqui apresentado deve ser mudado pelo caminho usado em seu PC.
Salve seu arquivo com o nome ex4.html e abra-o no navegador, aparentemente tudo está normal, agora vá ate a pasta da imagem e mova o arquivo ex4.html e a imagem para qualquer outra pasta, volte ao navegador e abra á pagina, perceba que no lugar da imagem aparece um X indicando que a imagem não foi encontrada. Mas por que?
A resposta é simples quando você inseriu o link você disse para o programa que a imagem estaria obrigatoriamente naquela pasta quando você mudou os arquivos de lugar a imagem não pode ser encontrada no local indicado. Agora retorne os arquivos e atualiza o navegador, perceba que a imagem voltou.
Agora vamos fazer usando link relativo no código acima apague onde esta escrito
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] and Settings/Gleison/Desktop/ e salve o documento, vá ate o navegador e atualize a pagina, veja que nada mudou, porem agora mova os arquivos da pagina e da imagem para o mesmo local daquela hora e abra a pagina, veja que agora a imagem aparece, você deve estar se perguntando o que aconteceu agora?
A resposta e simples, quando você digitou apenas o nome da imagem você informou ao programa que ele deveria procurar a imagem na mesma pasta onde estava a pagina sendo assim ela funciona normalmente, agora retorne os arquivos ao local de origem.
Deve se usar links absolutos quando está sendo criado um site que não será en**Censurado** para o servidor via FTP, ou seja, você vai criar a pagina no servidor através de um assistente ou digitando os códigos os arquivos serão en**Censurado** via assistente e o servidor se encarregará de lhe dizer qual é o link do arquivo sendo assim você deverá informar o link completo para o arquivo a desvantagem é caso resolva mudar de servidor terá de atualizar os links tudo de novo.
Crie uma pagina:
Nome:exepratico2.html
Titulo:Exercicio Pratico 2
Texto Centralizado: Aulas de HTML
Pule uma linha
Texto restante na cor: #0000FF
Texto Restante: Esse é o meu segundo exercicio prático, (ir para proxima linha)
e nele pretendo praticar o que foi aprendido ate agora.(ir para proxima linha)
Inserir 3 imagens>: 1 com borda 3 centralizado,(ir para proxima linha)
1 com borda 5 a direita,(ir para proxima linha)
1 sem borda a esquerda.
Crie como foi citado inclusive respeitando as quebra de linha.
Texto azul = Códigos e atributos do HTML
Texto Azul em negrito = Codigos a serem adcionados ao codigo já existente.
Texto preto = Conteúdo da pagina.
Texto verde = Observações e considerações importantes.
POR QUE USAR IMAGENS?
A razão é muito simples, é como ler um livro, você presta mais atenção quando o mesmo tem figuras certo?. Nas páginas da internet é igual com uma ressalva quando estão na frente de um monitor a paciência do usuário diminui, sendo assim o sucesso de sua página pode significar o sucesso ou o fracasso da sua página.QUAIS IMAGENS SÃO ACEITAS?
O HTML aceita 3* tipos de imagens, são elas:GIF: O principal formato caracteriza-se pelo pequeno tamanho, tamanho esse proporcionado por ter um limite Maximo de 256 cores, ou seja, se sua imagem tem menos de 256 cores o ideal é salva-la em GIF porem se tiver mais de 256 na hora de salvar a imagem irá perder cores, caso tenha muitas cores isso acarretará numa perda considerável de qualidade.
Outra característica é o Canal “Alpha” de transparência, como assim. Toda imagem em um com**Censurado**dor nada mais é que um “quadrado”, quando encontramos uma imagem que aparentemente não tem esse formato é porque o restante que forma o quadrado está com uma cor transparente, e é isso que o GIF. Tem com ele você pode criar uma imagem que aparentemente não é um quadrado
JPEG: Este é o formato fotográfico, ou seja, nele não há limite de cores, sendo assim ideal para imagens com mais de 256 cores, o único inconveniente é que devido a qualidade costuma ter um tamanho relativamente grande.
Outra característica é a ausência do canal “Alpha” de transparência, ou seja, neste formato não se pode ter imagens que não sejam quadrados já que se ocorrer isso aquilo que deveria ser transparente ficará na cor Branca.
*PNG: Este é um novo formato que irá substituir o JPEG e o GIF futuramente, atualmente não é muito difundido e nem muito compatível com os navegadores. O PNG nada mais é do que a união do GIF e do JPEG, sendo assim em um documento PNG pode ter imagens com mais de 256 cores e com um fundo transparente.
OBS: O PNG AINDA NÃO E TOTALMENTE DIFUNDIDO, SENDO ASSIM AINDA NÃO É MUITO COMPATÍVEL COM MUITAS VERSÕES DE NAVEGADORES.
INSERINDO IMAGENS
Para se inserir imagens utilizamos o tag <IMG></IMG> com o atributo SRC Volte ao ex2.html e adicione os seguintes tag para que fiquem como o abaixo, copie qualquer imagem GIF ou JPEG para a mesma pasta do arquivo, lembrando que no local onde foi inserido a imagem verdetela.jpg(a imagem verdetela foi usada no meu caso apenas como uma forma de ilustrar o uso das tags) você deve inserir o nome da sua imagem e o respectivo formato.
<HTML>
<head>
<title>Exercício 2</title>
</head>
<body>
<div align=”Center”>
<font face="Arial” color=”#FF0000” size=”10”>
<b><i>Curso de HTML</b></i></font></div><p>
<img src=”verdetela.jpg”></img><BR>
Este é o meu Segundo exercício de HTML,<BR>
E nele irei aprender a formatar o texto.
</body>
</HTML>
Salve seu arquivo e abra-o no navegador, veja que agora temos uma imagem após o texto em vermelho.
ADICIONANDO TEXTO ALTERNATIVO E BORDAS
Você já deve ter reparado que algumas imagens exibem uma legenda quando posicionamos o mouse sobre elas, isso é definido pelo atributo ALT o atributo BORDER insere uma borda em volta da imagem, ambos devem ser usado junto com img.Volte ao ex2.html e adicione os seguintes tag para que fiquem como o abaixo.
<HTML>
<head>
<title>Exercício 2</title>
</head>
<body>
<div align=”Center”>
<font face="Arial” color=”# FF0000” size=”10”>
<*b><*i>Curso de HTML<*/i><*/b></font></div><p>
<img src=”verdetela.jpg” alt=”Minha Imagem” border=”3”></img><BR>
Este é o meu Segundo exercício de HTML,<BR>
E nele irei aprender a formatar o texto.
</body>
</HTML>
Salve seu arquivo e abra-o no navegador, posicione o mouse sobre a imagem veja que agora é exibida uma legenda na imagem com o texto “Minha Imagem” além de uma borda na imagem.
REFERENCIAS ABSOLUTAS OU RELATIVAS
Este é um assunto na qual você deve prestar muita atenção, você deve estar lembrado que foi pedido que se colocasse a imagem na mesma pasta do arquivo HTML, más por quê?A resposta é simples, todo arquivo que inserimos no HTML é referenciado ou seja é chamado só que para isso devemos informar o local onde o arquivo está e para isso podemos fazer de dois jeito, são eles:
Referencia Absoluta ou Link Direto: Sua característica é colocar o endereço completo do arquivo. Entendendo melhor um exemplo dessa referencia ficaria assim: “http://www.meusite.com/minhaimagem.gif”, perceba que foi indicado o local exato do arquivo.
Referencia Relativa ou Link Relativo: Sua característica principal é colocar o arquivo na pasta da pagina ou dentro de outras pastas sendo que a pasta deverá estar junto da página. Entendendo melhor um exemplo dessa referencia ficaria assim:
“minhaimagem.gif”, perceba que não foi indicado o local exato do arquivo.
Outra forma de usar a relatividade e o link “imagens/verdetela.gif”, neste caso eu informei que o programa deve procurar a imagem dentro da pasta imagens que está junto da página.
Outra forma de usar a relatividade e o link ../verdetela.gif”, neste caso eu informei que o programa deve procurar a imagem dentro de uma pasta anterior da atual onde está o arquivo.
QUAL É A DIFERENÇA PRATICA?
Vamos pensar, estamos criando um site na pagina nos vamos inserir uma imagem denominada a mesma usada no exercício anterior, primeiramente vamos inserir a imagem com um link absoluto, ou seja, com o endereço completo, se você estiver criando o site Off-line digite o endereço que aparece na barra de endereço do seu sistema operacional. Digite o seguinte código.<HTML>
<head>
<title>Exercício 4</title>
</head>
<body>
<img src=”file:///c:/Documents and Settings/Gleison/Desktop/verdetela.jpg" alt=”Minha Imagem”></img>
</body>
</HTML>
Lembrando que o caminho aqui apresentado deve ser mudado pelo caminho usado em seu PC.
Salve seu arquivo com o nome ex4.html e abra-o no navegador, aparentemente tudo está normal, agora vá ate a pasta da imagem e mova o arquivo ex4.html e a imagem para qualquer outra pasta, volte ao navegador e abra á pagina, perceba que no lugar da imagem aparece um X indicando que a imagem não foi encontrada. Mas por que?
A resposta é simples quando você inseriu o link você disse para o programa que a imagem estaria obrigatoriamente naquela pasta quando você mudou os arquivos de lugar a imagem não pode ser encontrada no local indicado. Agora retorne os arquivos e atualiza o navegador, perceba que a imagem voltou.
Agora vamos fazer usando link relativo no código acima apague onde esta escrito
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] and Settings/Gleison/Desktop/ e salve o documento, vá ate o navegador e atualize a pagina, veja que nada mudou, porem agora mova os arquivos da pagina e da imagem para o mesmo local daquela hora e abra a pagina, veja que agora a imagem aparece, você deve estar se perguntando o que aconteceu agora?
A resposta e simples, quando você digitou apenas o nome da imagem você informou ao programa que ele deveria procurar a imagem na mesma pasta onde estava a pagina sendo assim ela funciona normalmente, agora retorne os arquivos ao local de origem.
QUANDO USAR ABSOLUTO OU RELATIVO?
Deve se usar links relativos quando está sendo criado um site que será en**Censurado** para o servidor via FTP, ou seja, você vai enviar os arquivos e pastas para o servidor da maneira que estão em seu com**Censurado**dor, assim caso resolva mudar de servidor basta fazer upload de tudo de novo para o novo servidor e terá a vantagem de não ter que atualizar os links.Deve se usar links absolutos quando está sendo criado um site que não será en**Censurado** para o servidor via FTP, ou seja, você vai criar a pagina no servidor através de um assistente ou digitando os códigos os arquivos serão en**Censurado** via assistente e o servidor se encarregará de lhe dizer qual é o link do arquivo sendo assim você deverá informar o link completo para o arquivo a desvantagem é caso resolva mudar de servidor terá de atualizar os links tudo de novo.
Exercício
Crie uma pagina:
Nome:exepratico2.html
Titulo:Exercicio Pratico 2
Texto Centralizado: Aulas de HTML
Pule uma linha
Texto restante na cor: #0000FF
Texto Restante: Esse é o meu segundo exercicio prático, (ir para proxima linha)
e nele pretendo praticar o que foi aprendido ate agora.(ir para proxima linha)
Inserir 3 imagens>: 1 com borda 3 centralizado,(ir para proxima linha)
1 com borda 5 a direita,(ir para proxima linha)
1 sem borda a esquerda.
Crie como foi citado inclusive respeitando as quebra de linha.
Legenda:
Texto azul = Códigos e atributos do HTML
Texto Azul em negrito = Codigos a serem adcionados ao codigo já existente.
Texto preto = Conteúdo da pagina.
Texto verde = Observações e considerações importantes.
Perdeu alguma aula?, Quer saber qual é a proxima? Visite o Indice
Clique aqui
Clique aqui para visitar o site oficial
Clique aqui
Clique aqui para visitar o site oficial
