Aula 009: A tag "img"
Autor: Uai Cartões Bh | Publicado: 2012-05-08T08:00:00-03:00


Hoje, iremos aprender como inserir uma imagem em nossas página HTML. É claro que vou abordar o assunto superficialmente apenas para que nós aprendamos como fazê-lo e possamos memorizar a estrutura de inserção de imagem em HTML.Mais para frente, irei abordar o assunto novamente com mais detalhes.




Revisão



Gosto de parar um assunto para rever outros, acho que isso nos ajuda a manter a memória sempre em dia e nos "obriga" a estudar conteúdo já vistos. Então, vamos rever algumas coisas, realizando a tarefa abaixo:



Tarefa 004


Abra o seu bloco de notas e digite a estrutura básica do HTML (se não lembra como, volte a aula 002)
Digite no titulo do documento a seguinte frase: O que já aprendi em HTML?
No corpo do documento, crie um título escrevendo: Este é um título em HTML
Escreva esse parágrafo logo abaixo:&nbsp;



Com um parágrafo como esse, eu posso escrever meus textos em HTML &nbsp;visualizá-los em meu navegador. Ainda tenho muito o que aprender, mas uma página básica já é possível fazer. Vou continuar estudando HTML para que num futuro bem próximo eu possa começar a desenvolver meus próprios sites.




Crie um subtitulo de nível 2 com a seguinte frase: O sub-titulo em HTML
Crie um novo parágrafo com o seguinte texto:



O sub-titulo acima também foi criado em HTML. Eu não sabia disso até agora, mas os títulos e subtítulos em um código HTML são bastante importantes para os mecanismos de busca, como o Google, por exemplo. E com base nesses títulos (e subtítulos) que os buscadores de sites na internet indexam minhas páginas e sabem sobre o que as páginas estão tratando, ou seja, com base nos títulos e subtitulos, o Google obterá maiores informações sobre o conteúdo de minha página e - assim - fará o melhor posicionamento do meu site nos resultados de busca.




Crie mais um subtitulo de nível 3 com a seguinte frase: Como eu soube disso?
Digite o último parágrafo de seu documento:



Soube disso estudando no Blog Expedição 3w na internet. Lá eu aprendo tudo sobre HTML, CSS, Javascript e PHP. Vale a apena conferir o site.




E para finalizar, aplique o link de nosso blog na seguinte expressão:&nbsp;Blog Expedição 3w no parágrafo acima. Nosso site para criar o link é esse:&nbsp;
http://expedicao3w.blogspot.com.br.
Salve o documento como tarefa004.html
Visualize em seu navegador.


(A resposta dessa tarefa está no final dessa aula)




Como inserir imagens em um documento HTML



Como fazer para inserirmos imagens em nossas páginas na web? Até agora, tudo tava muito "texto do Word" e precisamos começar a implementar outros objetos para que nossas páginas comecem a ter "cara de site". Então - hoje - vamos aprender como inserir uma imagem no documento HTML.




A tag &lt;img/&gt;



Para inserirmos uma imagem, utilizamos a tag &lt;img/&gt;. Assim como no link (que aprendemos na aula passada), teremos também um atributo para essa tag (como veremos a seguir). Peguei uma imagem na internet apenas para que possamos aprender a aula de hoje. Salve essa imagem na sua pasta Aula HTML.




imagem "chocolate.jpg". Para salvar, clique com o botão direito do mouse sobre a imagem &nbsp;acima e depois escolha &nbsp;SALVAR IMAGEM COMO. Salve essa imagem em sua pasta AULA HTML


Para inserirmos essa imagem em uma página HTML utilizaremos a seguinte tag:



&lt;img src="chocolate.jpg" /&gt;



Explicando...


A tag &lt;img/&gt; é a tag responsável por inserir uma imagem no documento HTML;
Dentro da tag &lt;img/&gt; iremos colocar o atributo src (vem do inglês source, que quer dizer, fonte, origem). O atributo src vai dizer ao navegador onde a imagem está guardada, para que ele possa buscá-la e inseri-la no documento.
O endereço da imagem no atributo "src" deve estar sempre entre aspas.


Como você deve ter percebido, a tag &lt;img/&gt; é uma tag apenas de fechamento. Até agora nós vimos que todas as tags HTML são compostas por uma tag de abertura e outra para fechar (ex.: &lt;p&gt; e &lt;/p&gt;). Na tag de imagem, iremos utilizar apenas a de fechamento.




Exemplo Prático


Abra o nosso Editor HTML (clique aqui)
Digite o seguinte código e veja o resultado:


&lt;img src="http://4.bp.blogspot.com/-GZ4zb3SeLW0/T6jwwsS5WKI/AAAAAAAAATI/GjfJhMmZv7o/s400/chocolate.jpg" /&gt;





Você percebe que o navegador insere a imagem no documento, recuperando essa imagem no endereço onde ela está hospedada, através do atributo src.



Obs.: O endereço publicado no src (http://4.bp.blogspot.com/-GZ4zb3SeLW0/T6jwwsS5WKI/AAAAAAAAATI/GjfJhMmZv7o/s400/chocolate.jpg) é o endereço onde a imagem atual está guardada. Na próxima aula, iremo aprender a inserir a imagem localmente.




Os atributos "width" e "height"



Ainda dentro da tag &lt;img/&gt;, podemos inserir dois novos atributos de formatação, muito úteis: o width (comprimento) e o height (altura). Eles irão determinar o tamanho da imagem que será impresso no navegador. Iremos colocar as dimensões das imagens em "pixels". Veja - agora - como ficou a tag:



&lt;img src="
http://4.bp.blogspot.com/-GZ4zb3SeLW0/T6jwwsS5WKI/AAAAAAAAATI/GjfJhMmZv7o/s400/chocolate.jpg&nbsp;" width="150" height="100" /&gt;




Visualize novamente o código acima em nosso editor online e veja a diferença.



Explicando novamente...


A tag &lt;img&gt; é a tag responsável por inserir uma imagem no documento HTML
O atributo src vai dizer ao navegador onde a imagem está guardada, para que ele possa buscá-la e inseri-la no documento.
O atributo width irá dizer ao navegador qual será o comprimento (em pixels) dessa imagem;
O atributo height&nbsp;
irá dizer ao navegador qual será a altura (em pixels) dessa imagem;&nbsp;&nbsp;
Todos os atributos devem sempre ser escritos entre aspas "".


Observação importante: escreva essas três palavras (src, width e height) algumas vezes em um caderno ou no word para aprender a escrevê-las corretamente. Se escrever errado, a imagem pode não aparecer em seu documento. Memorize essas palavras para não errar, hein?



Obs2: caso você não coloque na tag &lt;img/&gt; o valor do width e do height, o navegador irá inserir a imagem na página em seu tamanho original.



Existem outros atributos para a tag imagem, mas - por questões didáticas - iremos parar por aqui e aprender essa parte para depois entrarmos em conteúdos avançados, ok?



Salve a a imagem do chocolate acima em sua pasta, pois na próxima aula iremos fazer uma atividade que necessitará desse arquivo.



Por hoje é só e continue estudando, memorizando o que já estudamos, criando páginas para praticar o conteúdo e não desista: a cada nova aula, mais próximo de nossos objetivos estamos.



Vejo vocês na próxima aula.



RESPOSTA DA TAREFA 004




Tarefa 004


Abra o seu bloco de notas e digite a estrutura básica do HTML


&lt;html&gt;


&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;


&lt;/html&gt;

Digite no titulo do documento a seguinte frase:&nbsp;O que já aprendi em HTML?


&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;O que já aprendi em HTML?&lt;/title&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;

No corpo do documento, crie um título escrevendo:&nbsp;Este é um título em HTML.


&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;O que já aprendi em HTML?&lt;/title&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Este é um titulo em HTML&lt;/h1&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;

Escreva esse parágrafo logo abaixo:&nbsp;



Com um parágrafo como esse, eu posso escrever meus textos em HTML &nbsp;visualizá-los em meu navegador. Ainda tenho muito o que aprender, mas uma página básica já é possível fazer. Vou continuar estudando HTML para que num futuro bem próximo eu possa começar a desenvolver meus próprios sites.






&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;O que já aprendi em HTML?&lt;/title&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Este é um titulo em HTML&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Com um parágrafo como esse, eu posso escrever meus textos em HTML &nbsp;visualizá-los em meu navegador. Ainda tenho muito o que aprender, mas uma página básica já é possível fazer. Vou continuar estudando HTML para que num futuro bem próximo eu possa começar a desenvolver meus próprios sites.&lt;/p&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;



Crie um subtitulo de nível 2 com a seguinte frase:&nbsp;O sub-titulo em HTML


&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;O que já aprendi em HTML?&lt;/title&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Este é um titulo em HTML&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Com um parágrafo como esse, eu posso escrever meus textos em HTML &nbsp;visualizá-los em meu navegador. Ainda tenho muito o que aprender, mas uma página básica já é possível fazer. Vou continuar estudando HTML para que num futuro bem próximo eu possa começar a desenvolver meus próprios sites.&lt;/p&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;O subtitulo em HTML&lt;/h2&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;

Crie um novo parágrafo com o seguinte texto:



O sub-titulo acima também foi criado em HTML. Eu não sabia disso até agora, mas os títulos e subtítulos em um código HTML são bastante importantes para os mecanismos de busca, como o Google, por exemplo. E com base nesses títulos (e subtítulos) que os buscadores de sites na internet indexam minhas páginas e sabem sobre o que as páginas estão tratando, ou seja, com base nos títulos e subtitulos, o Google obterá maiores informações sobre o conteúdo de minha página e - assim - fará o melhor posicionamento do meu site nos resultados de busca.






&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;O que já aprendi em HTML?&lt;/title&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Este é um titulo em HTML&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Com um parágrafo como esse, eu posso escrever meus textos em HTML &nbsp;visualizá-los em meu navegador. Ainda tenho muito o que aprender, mas uma página básica já é possível fazer. Vou continuar estudando HTML para que num futuro bem próximo eu possa começar a desenvolver meus próprios sites.&lt;/p&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;O subtitulo em HTML&lt;/h2&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;O sub-titulo acima também foi criado em HTML. Eu não sabia disso até agora, mas os títulos e subtítulos em um código HTML são bastante importantes para os mecanismos de busca, como o Google, por exemplo. E com base nesses títulos (e subtítulos) que os buscadores de sites na internet indexam minhas páginas e sabem sobre o que as páginas estão tratando, ou seja, com base nos títulos e subtitulos, o Google obterá maiores informações sobre o conteúdo de minha página e - assim - fará o melhor posicionamento do meu site nos resultados de busca.&lt;/p&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;





Crie mais um subtitulo de nível 3 com a seguinte frase:&nbsp;Como eu soube disso?


&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;O que já aprendi em HTML?&lt;/title&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Este é um titulo em HTML&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Com um parágrafo como esse, eu posso escrever meus textos em HTML &nbsp;visualizá-los em meu navegador. Ainda tenho muito o que aprender, mas uma página básica já é possível fazer. Vou continuar estudando HTML para que num futuro bem próximo eu possa começar a desenvolver meus próprios sites.&lt;/p&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;O subtitulo em HTML&lt;/h2&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;O sub-titulo acima também foi criado em HTML. Eu não sabia disso até agora, mas os títulos e subtítulos em um código HTML são bastante importantes para os mecanismos de busca, como o Google, por exemplo. E com base nesses títulos (e subtítulos) que os buscadores de sites na internet indexam minhas páginas e sabem sobre o que as páginas estão tratando, ou seja, com base nos títulos e subtitulos, o Google obterá maiores informações sobre o conteúdo de minha página e - assim - fará o melhor posicionamento do meu site nos resultados de busca.&lt;/p&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;Como eu soube disso?&lt;/h3&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;



Digite o último parágrafo de seu documento:



Soube disso estudando no Blog Expedição 3w na internet. Lá eu aprendo tudo sobre HTML, CSS, Javascript e PHP. Vale a apena conferir o site.






&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;O que já aprendi em HTML?&lt;/title&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Este é um titulo em HTML&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Com um parágrafo como esse, eu posso escrever meus textos em HTML &nbsp;visualizá-los em meu navegador. Ainda tenho muito o que aprender, mas uma página básica já é possível fazer. Vou continuar estudando HTML para que num futuro bem próximo eu possa começar a desenvolver meus próprios sites.&lt;/p&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;O subtitulo em HTML&lt;/h2&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;O sub-titulo acima também foi criado em HTML. Eu não sabia disso até agora, mas os títulos e subtítulos em um código HTML são bastante importantes para os mecanismos de busca, como o Google, por exemplo. E com base nesses títulos (e subtítulos) que os buscadores de sites na internet indexam minhas páginas e sabem sobre o que as páginas estão tratando, ou seja, com base nos títulos e subtitulos, o Google obterá maiores informações sobre o conteúdo de minha página e - assim - fará o melhor posicionamento do meu site nos resultados de busca.&lt;/p&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;Como eu soube disso?&lt;/h3&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Soube disso estudando no Blog Expedição 3w na internet. Lá eu aprendo tudo sobre HTML, CSS, Javascript e PHP. Vale a apena conferir o site.&lt;/p&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;





E para finalizar, aplique o link de nosso blog na seguinte expressão:&nbsp;Blog Expedição 3w&nbsp;no parágrafo acima. Nosso site para criar o link é esse:&nbsp;&nbsp;http://expedicao3w.blogspot.com.br.


&lt;html&gt;

&nbsp; &nbsp; &nbsp;&lt;head&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;O que já aprendi em HTML?&lt;/title&gt;

&nbsp; &nbsp; &nbsp;&lt;/head&gt;

&nbsp; &nbsp; &nbsp;

&nbsp; &nbsp; &nbsp;&lt;body&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Este é um titulo em HTML&lt;/h1&gt;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Com um parágrafo como esse, eu posso escrever meus textos em HTML &nbsp;visualizá-los em meu navegador. Ainda tenho muito o que aprender, mas uma página básica já é possível fazer. Vou continuar estudando HTML para que num futuro bem próximo eu possa começar a desenvolver meus próprios sites.&lt;/p&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;O subtitulo em HTML&lt;/h2&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;O sub-titulo acima também foi criado em HTML. Eu não sabia disso até agora, mas os títulos e subtítulos em um código HTML são bastante importantes para os mecanismos de busca, como o Google, por exemplo. E com base nesses títulos (e subtítulos) que os buscadores de sites na internet indexam minhas páginas e sabem sobre o que as páginas estão tratando, ou seja, com base nos títulos e subtitulos, o Google obterá maiores informações sobre o conteúdo de minha página e - assim - fará o melhor posicionamento do meu site nos resultados de busca.&lt;/p&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;Como eu soube disso?&lt;/h3&gt;



&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Soube disso estudando no &lt;a href="http://expedicao3w.blogspot.com.br"&gt;Blog Expedição 3w&lt;/a&gt; na internet. Lá eu aprendo tudo sobre HTML, CSS, Javascript e PHP. Vale a apena conferir o site.&lt;/p&gt;

&nbsp; &nbsp; &nbsp;&lt;/body&gt;

&lt;/html&gt;

Salve o documento como&nbsp;tarefa004.html
Visualize em seu navegador.


Visualização no Navegador