Mais
×

Como inserir duas imagens horizontalmente com HTML

Atualizado em 20 julho, 2017

No HTML, é necessário inserir imagens usando a tag e aplicar estilos usando código CSS (Cascading Style Sheet). Você pode alinhar imagens em uma linha horizontal "flutuando" elas, mas é necessário mantê-las flutuantes sem quebrar os layouts da página web. Usar uma tag

em torno das imagens as força a ficar num determinado lugar. Depois de alinhá-las, utilize CSS para adicionar espaçamento e outros efeitos. Esta técnica é bastante útil para a criação de páginas com galeria de imagens.

Instruções

Inserindo imagens usando HTML e alinhando com CSS (Digital Vision./Digital Vision/Getty Images)
  1. Adicione uma tag para cada imagem em seu documento HTML. Coloque cada uma delas numa linha, deixando uma abaixo da outra. Use o atributo "src" para definir o caminho do arquivo (o endereço web) para cada imagem, assim:

  2. Salve o código HTML e teste no navegador. Se você usa um servidor, não esqueça de fazer o upload tanto do arquivo HTML quanto das duas imagens. Ambas já devem se alinhar lado a lado. Isso acontece porque, apesar de você colocar cada tag em uma linha, você não as colocou dentro de

    para criar parágrafos ou em uma tag
    para quebrar linhas. Pode acontecer de as imagens não ficarem lado a lado. Neste caso,você também vai precisar fazer o espaçamento das imagens no CSS.

  3. Edite o CSS da sua página para garantir que as imagens sempre fiquem alinhadas horizontalmente. Adicione o código num arquivo .CSS externo, ou entre as tags