A ideia dessa sequência de artigos é passar o básico necessário para que você sozinho(a) consiga criar seus próprios anúncios no Mercado Livre, de maneira otimizada e sem precisar contratar mão de obra especializada. O foco será a parte da descrição do seu anúncio, onde poderá criar elementos HTML e deixá-los com aparência melhor e mais sofisticada deixando assim os seus anúncios mais profissionais. Hoje veremos as formas de inserir e formatar textos em códigos HTML:
Aula 3 - Inserção de imagens nas páginas
Para se colocar imagens em uma página HTML usa-se o marcador <IMG> dentro das delimitações do <BODY>.
O marcador <IMG> e seus principais atributos
<img src="imagem">
O arquivo a ser referenciado nessa página tem que ser uma imagem (jpg, gif, png, bmp, etc). A sigla src é a abreviação de Source, que em inglês quer dizer origem. Daí a necessidade de se colocar o caminho correto do arquivo, que pode ser um caminho absoluto ou relativo.
É interessante colocar as imagens em um diretório (pasta) separado para facilitar a manutenção dos arquivos.
Exemplos:
<img src="casa.jpg">
<img src="imagens/casa.jpg">
<img src="http://www.meusite.com.br/casa.jpg">
<img src="imagens/casa.jpg">
<img src="http://www.meusite.com.br/casa.jpg">
Para fins práticos deixarei uma imagem na mesma pasta do nosso aquivo "aula1.html" e a referência será sempre para a mesma. Confira como deixei os arquivos:
Alinhamento
<img src="imagem" align="alinhamento">
Este atributo especifica o tipo de alinhamento entre a imagem e o texto da página. As opções de alinhamento são: left, right, top, textop, middle, absmiddle, baseline, bottom, absbottom e center.
Exemplo:
<p>Texto de exemplo da aula sobre imagens na página
<img src="casa.jpg" align="center">
</p>
<img src="casa.jpg" align="center">
</p>
Abaixo segue o exemplo a prática:
Exemplo:
<p>Texto de exemplo da aula sobre imagens na página
<img src="casa.jpg" align="top">
</p>
<img src="casa.jpg" align="top">
</p>
Abaixo segue o exemplo a prática:
Borda
<img src="imagem" border="valor">
Este atributo determina a espessura da borda da imagem. No caso de uma imagem sem bordas, este atributo não precisa ser citado.
Exemplo:
<img src="casa.jpg" border="10">
Abaixo segue o exemplo a prática:
Alguns detalhes muito importantes que você provavelmente não encontrará em artigos do gênero são sobre as cores das bordas:
Exemplo:
- Não existe uma propriedade específica para alterar a cor da borda;
- Em CSS(Cascading Style Sheet) que seria um "HTML Avançado" temos opções nativas de personalização de bordas.
Mas e agora, tenho que aprender CSS para alterar cores das bordas de minhas imagens? Não necessariamente. A cor da borda de uma página em HTML segue a cor da fonte que está sendo usada e a fonte padrão nativa de qualquer navegador de internet é da cor preta. Com essa informação em mente e lembrando do conteúdo da aula passada sobre inserir textos em páginas(Acesse o conteúdo clicando aqui!) o raciocínio é o seguinte: Se eu alterar a cor do texto de onde está inserida a imagem a borda acompanha essa cor.
Exemplo:
<font color="#ff0000">
<img src="casa.jpg" border="50">
</font>
<img src="casa.jpg" border="50">
</font>
Abaixo segue o exemplo a prática:
Largura e altura
<img src="imagem" width="largura" height="altura">
Estes atributos especificam a largura e a altura da imagem. Podem ser dados os valores em pixels ou serem proporcionais ao tamanho que a figura ocupará na página. Uma figura com dimensões desproporcionais às vezes sofre um efeito "stretch", ou seja, aparece repuxada na página.
Exemplo:
<img src="casa.jpg" width="333" height="200">
Abaixo segue o exemplo a prática:
Exemplo:
<img src="casa.jpg" width="100%" height="20%">
Abaixo segue o exemplo a prática:
Para o caso de termos a necessidade de reduzir a imagem e manter sua proporção, basta especificarmos a largura OU altura que desejarmos. O outro atributo será reduzido automaticamente na proporção exata para que a imagem fique sem distorções.
Exemplo:
<img src="casa.jpg" height="20%">
Abaixo segue o exemplo a prática:
Texto descritivo e Título
<img src="imagem" title="título da imagem" alt="texto descritivo">
O atributo title exibe uma descrição quando o cursor move-se sobre a imagem. Existem usuários que utilizam navegadores incapazes de exibir imagens ou ajustam o navegador para não carregar imediatamente as imagens, devido á demora no carregamento das páginas.
O texto descritivo(alt) possibilita que saibam do que se trata a imagem mesmo antes que sejam carregadas.
Exemplo:
<img src="casa.jpg" title="foto título da casa" alt="Foto de uma casa">
Abaixo segue o exemplo a prática:
Assim mesmo antes de ser carregada a foto o usuário já perceberá que se trata de uma casa.
Esses atributos tem muita importância para SEO(Search Engine Optimization), o que faz de seu uso de suma importância para alavancar as páginas em buscas orgânicas.
Esses atributos tem muita importância para SEO(Search Engine Optimization), o que faz de seu uso de suma importância para alavancar as páginas em buscas orgânicas.
Espaço vertical e horizontal
<img src="imagem" vspace="valor" hspace="valor">
Especifica o espaço vertical (vspace) e o espaço horizontal (hspace) que pode aparecer entre a imagem e o texto mais próximo ou até mesmo para outra imagem na linha corrente. O valor é dado em pixels.
Exemplo:
<img src="casa.jpg" hspace="0" vspace="0">texto acompanhando a imagem
Abaixo segue o exemplo a prática:
Exemplo:
<img src="casa.jpg" hspace="30" vspace="30">Texto acompanhando a imagem
Abaixo segue o exemplo a prática:
Os atributos vspace e hspace são a solução quando se quer trabalhar com espaços em branco entre os objetos da página, criando um layout limpo e equilibrado.
GIF ANIMADO
GIF’s animados são imagens gravadas em formato GIF. A diferença é que estas imagens são geradas em um programa específico para animação de imagens. Existem vários programas destinados à confecção de GIF animado que podem ser copiados da internet. Embora cada um desses programas tenha suas particularidades, o trabalho geral quando se cria um GIF animado consistem em:
- Fornecer uma seqüência de quadros ou frames (sendo cada quadro uma imagem gif comum separada);
- Especificar para cada quadro um tempo de duração para que possa ocorrer a animação;
- Especificar o número de vezes que a animação como um todo irá acontecer (sendo que essa repetição pode ficar em repetição contínua);
- Ao final da criação. Todas as seqüências entradas unem-se para formar um único arquivo no formato GIF.
Os banners de propaganda vistos na Web nada mais são do que GIFs animados. Para que eles não influam no carregamento da página precisam ser "leves", ou seja, pequenos em termos de Kilobytes. Um padrão de tamanho aceitável para um banner animado de até 480x60 pixels de dimensão está em torno de 6 a 8 KB.
Conclusão
O que passei na aula de hoje é o básico para você inserir e configurar imagens de forma consciente em seus anúncios. O conteúdo de imagens + as aulas anteriores já te deixam com certa autonomia para criar e editar seus anúncios de forma correta e segura. Não perca as próximas aulas!
Exemplo:
<img src="http://www.gifmania.com.pt/Gifs-Animados-Espaco/Imagens-Animadas-Astronomia/Gif-Animados-Planets/Planets-49023.gif">
Abaixo segue o exemplo a prática:
Conclusão
O que passei na aula de hoje é o básico para você inserir e configurar imagens de forma consciente em seus anúncios. O conteúdo de imagens + as aulas anteriores já te deixam com certa autonomia para criar e editar seus anúncios de forma correta e segura. Não perca as próximas aulas!
Nenhum comentário:
Postar um comentário