Curso de HTML5, CSS e JavaScript

Aqui, você irá aprender 3 linguagens essenciais para criar páginas Web: HTML5, CSS e JavaScript.

Se você está começando, vou explicar de uma maneira bem grosseira: HTML5 é para colocar as coisas na página, CSS é para deixar bonito.
Ou seja, HTML5 separa os elementos da interface em seções, tabelas, formulários, parágrafos, etc., enquanto a linguagem CSS formata esses elementos com cores, bordas, espaçamento, etc.
A linguagem JavaScript detecta a interação do usuário e permite manipular os elementos da interface, aprimorando a experiência do usuário.

HTML5 - imagens

Para inserir uma imagem no corpo de uma página HTML, usa-se a tag <img>.
Já para inserir imagem de fundo, usaremos a linguagem CSS (em breve).

Tag <img>

Os principais atributos da tag <img> são:

  • src: indica o caminho da imagem dentro das pastas do web site.
  • alt: define um texto alternativo que será lido pelos navegadores de voz, também define um texto que será exibido caso a imagem não carregue.
  • height: define a altura da imagem. É importante definir esse atributo para que o navegador "reserve" o espaço no layout até que a imagem seja carregada.
  • width: define a largura da imagem. É importante definir esse atributo para que o navegador "reserve" o espaço no layout até que a imagem seja carregada.
  • border: apesar de não suportado no HTML5, pode ser necessário para retirar a borda de imagens que sejam links (border="0").
Extensões dos arquivos

Para a Web, são recomendadas estas extensões de imagens: JPG, PNG e GIF.

Exemplo

<img src="imagens/foto.png" alt="Imagem de página não encontrada" width="330" height="202" />

O exemplo acima carrega a imagem chamada "foto.png" que está dentro da pasta "imagens".
Atenção: A pasta "imagens" deve estar na mesma pasta do seu arquivo .html.

Resultado
Imagem de página não encontrada
Voltar ao Índice