Como fazer uma "iframe" aparecer em um local específico de uma página

Escrito por chris hoke | Traduzido por joao marcos padua filho
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer uma "iframe" aparecer em um local específico de uma página
A utilização de iframes deixa a página mais dinâmica e atrativa (Polka Dot Images/Polka Dot/Getty Images)

Uma "iframe" é uma moldura flutuante embutida e incorporada a uma página da internet. Uma iframe é capaz de exibir uma página externa e conteúdos como vídeos, imagens ou textos. Você poderá posicionar a página remota dentro da iframe utilizando o atributo CSS "position:absolute;", combinado com os atributos específicos "top" e "left". Esses atributos CSS fazem com que a página na iframe seja exibida em um local específico, o que é útil para exibir um conteúdo específico de uma página remota.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra o documento do site em um editor HTML ou de textos. Para abrir o documento de um site no editor de textos padrão do Windows, dê um clique com o botão direito sobre o arquivo e escolha "Open with" (Abrir com). Selecione o "Bloco de Notas" e clique em "OK".

  2. 2

    Clique para posicionar o cursor na linha do código onde deseja embutir a iframe. Pressione "Enter" para criar uma linha em branco.

  3. 3

    Digite "<iframe src='[remotepageURL]' style='position:absolute; top:[x]; left:[y];'>" na linha em branco. Substitua o texto "[remotepageURL]" pelo endereço e o nome da página remota. Substitua o "[x]" pela distância em pixels que você deseja deslocar do topo até a iframe na página remota. Para mover a página para cima (exibindo a parte inferior da página) digite um número negativo. Substitua o "[y]" pela distância em pixels que deseja deslocar a página remota do lado esquerdo da iframe. Por exemplo, para exibir a página de busca da Google, movida 200 pixels para baixo e 100 para a direita, digite "<iframe src='http://www.google.com' style='position:absolute; top:-200; left:-100;'>".

  4. 4

    Digite "</iframe>" para fechar a tag da iframe.

  5. 5

    Clique no menu "File" (arquivo) e em "Save" (salvar).

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível