Curso HTML – Aula 05

Por Guilherme Farias em 29 de maio de 2010

Olá leitores :)
Vamos começar a nossa quinta aula de HTML, na aula de hoje vamos aprender a inserir imagens e criar tabelas. Antes de começar, não vamos mais utilizar a mesma página de HTML (primeirapagina.html) Vamos criar outra página para trabalhar.
Então para criar a página vocês já devem saber como cria, ensinei para vocês na AULA 3.
Coloque o seguinte nome nesta segunda página, Pagina2.html , e vamos ao trabalho!

Tags complementares

Somente com as tag básicas vistas nas aulas anteriores, é possível fazer muita coisa. Realmente elas foram o “tudo” da Internet por algum tempo. Podemos dizer que elas foram a versão 1.0 do HTML. Porém, elas não eram suficientes. Assim, uma coleção de tags mais elaboradas foram normalizadas pelo W3C. Em pouco tempo, as novas versões dos navegadores já as interpretavam tornando os textos ricos ainda mais ricos.
Claro que essas novas tags seriam mais complexas, mas nada que seja também incompreensível. Apenas pela nova funcionalidade, elas passaram a precisar de mais informação.

Imagem: <img>

O primeiro marcador complementar é o que permitia inserir imagens no HTML. No entendo, havia um problema: não era possível colocar uma imagen dentro do código HTML. Assim, era necessário que o designer inserisse o arquivo com a imagem no servidor e, depois, inserisse uma URL para o local onde se encontra o arquivo, para o HTML ser capaz de mostrar a figura no meio do texto.
O resultado disso é o marcador de imagem <img>, que obedece á seguinte sintaxe:

<img src=”URL do arquivo”/>

Vou explicar cada parte dessa tag:
* IMG (image): indica para o navegador que ele vai inserir neste local uma imagem;
* SRC (source): diz para o navegador onde está o arquivo de imagem que deve ser inserido. Pode ser uma URL absoluto (http://servidor/arquivo), ou relativo (home/imagens/arquivo)

Note que é uma tag que se fecha, portanto tem espaço e barra no final.
O source (ou fonte, origem, se traduzido) é como o HTML aponta para o arquivo de imagem externo a ele mesmo. Normalmente, usamos imagens dentro do próprio servidor em que o HTML está hospedado. Neste caso, o caminho relativo é mais recomendado. Usamos o URL absoluto quando estamos chamando um arquivo de outro local. Imagine que o arquivo da foto esteja na mesma pasta do HTML. Neste caso, somente colocaríamos o nome do arquivo na origem:
<img src=”arquivo.jpg” />

Mas a regra geral recomenda que os arquivos de imagens fiquem em uma pasta separada, com todas as figuras do site. Normalmente, essa pasta tem como nome Imagens, Figuras ou algo do tipo.
Neste caso, o marcador ficaria assim:
<img src=”imagens/arquivo.jpg” />

Caso a imagem seja externa, ou queira por o link absoluto, temos que colocar toda a URL do local, o marcador ficaria assim:
<img src=”http://www.guiky.com.br/imagens/arquivo.jpg” />

Nesses exemplos, usei a extensão .jpg, mas poderia ser usada qualquer outra, desde que o navegador possa interpretar. As mais tradicionais são .jpg .gif e .png.

Alinhando a imagem
Um recurso interessante é usar o parâmetro align da tag <img>.
Ele permite alinhar as figuras em relação ao resto do texto.
Se não houver qualquer alinhamento, a figura fica desta forma:

<p>figura sem alinhamento: <img src=”Guiky.png” /> fica fora do texto. </p>

Na verdade, ela fica alinhada pela base (em inglês, bottom). Isso teria o mesmo resultado de alinhar pela parte de baixo:

<p>Figura com alinhamento bottom <img src=”Guiky.png” align=”bottom” /> fica fora do texto. </p>

Repare que a figura sem alinhamento, ou com o alinhamento bottom tem o mesmo efeito.

Veja quais são os alinhamentos tradicionais que você pode usar nas figuras:

<p>Figura alinhada <img src=”Guiky.png” align=”bottom” /> com o fundo no texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”middle” /> no meio do texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”top” /> com o topo no texto</p>

O resultado será esse:

Temos, ainda, duas formas “especiais” de alinhamento, que permitem contornar o texto, criando uma interessante linguagem visual, muito empregada na Internet: são os align=left e align=right.

Veja os exemplos usando um texto Lorem Ipsum, acrescente os seguintes complementos.
OBS: Para adicionar um imagem que está no computador, basta coloca ela na mesma pasta do HTML, e no lugar do SRC, você bota o nome dela, seguido da extensão do arquivo.

<HTML>
<head>
</head>
<body>
<p>Figura alinhada <img src=”Guiky.png” align=”bottom” /> com o fundo no texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”middle” /> no meio do texto</p>
<p>Figura alinhada <img src=”Guiky.png” align=”top” /> com o topo no texto</p>
<p><hr/><b>Testando Alinhamento esquerdo</b><br/>
<img src=”Guiky.png” align=”left” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. </p>
<p><hr/><b>Testando Alinhamento direito</b><br/>
<img src=”Guiky.png” align=”right” />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa.</p>

</body>
</HTML>

É possível usar um parâmetro para cada figura.

Nota: Lorem Ipsum é um texto em latim usado para preencher espaços de texto. Antes da Internet, ele era usado para montar e testar diagramação em gráficas. Ele tem duas vantagens: primeiro, é um texto de verdade e,assim imita de forma mais realista as séries de teclas com espaço; Possui palavras com tamanhos distintos, quebras de linhas e parágrafos, tudo pronto e com aspecto bastante real. Segundo, está em latim romano e, por isso, não faz sentido para a imensa maioria das pessoas, sendo um texto totalmente aleatório. Você pode saber mais sobre esse assunto fazendo uma busca por Lorem Ipsum em qualquer site especializado.

Estamos encerando por aqui a nossa quinta aula, você pode conferir as aulas anteriores nos links abaixo.

Veja as outras Aulas:

* Curso HTML – Aula 01
* Curso HTML – Aula 02
* Curso HTML – Aula 03
* Curso HTML – Aula 04
* Curso HTML – Aula 06
* Curso HTML – Aula 07
* Curso HTML – Aula 08
* Curso HTML – Aula 09

2 comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado.