Curso de HTML Completo: Aula 11 - iframes

E aí e agora pessoal nós vamos aprender a usar tag e Friends with friends são muito interessantes porque é uma maneira de você exibir uma página Web uma página HTML dentro de uma página HTML é tipo um sonho dentro de um sonho né uma coisa muito louca que é você pegar então uma página externa um site externo e ele rodar dentro da sua página eu vou mostrar aqui para vocês como isso aqui funciona o vou apagar esse aqui que a gente fez as listas não ordenadas também das tabelas tá Vou apagar aqui E a gente

vai usar a essa tag que a tag iframe a tag frame Ela é bem simples de ser utilizado a gente faz assim e frame aí o primeiro que a gente passa o primeiro parâmetro é src parecido com imagem com a imagem que a gente quer e a gente também pode especificar uma largura e uma altura né então eu posso colocar o e-bit Oi e o rei então a altura EA largura e eu também posso colocar um título o título aqui que é meu e frame por exemplo vou colocar aqui um esse título e ele tem

fechamento tal e freio ele tem fechamento aqui dentro desse src a gente pode colocar qualquer coisa a gente pode colocar uma outra página um outro documento Ou a gente pode colocar inclusive um site online só para vocês verem que que eu vou fazer eu vou colocar aqui dentro a pasta equipe que a gente tem barra e aqui vou colocar no chão me lembrar como é que é equipe demitri. HTML certo demitri o ponto HTML eu coloquei aqui que eu quero ir nesse frio ele Rode Aquela nossa página HTML demitiria certo vou dar um contra o

s olha só o que aconteceu Ele tá rodando o conteúdo daquela página aqui dentro da nossa página principal a gente colocou como que acrescentou aquela página aqui dentro uma página dentro de outra página é muito legal né pessoal Se eu colocar aqui o edit 100 porcento Olha que que vai acontecer ele vai ficar o tamanho da largura sem por cento da tela e aqui a altura se eu deixar sem nada ele vai ficar nesse mínimo agora se eu colocasse a rede e é alto deixa eu ver se ele vai ficar automático não não fica né

Deixa eu colocar aqui então o valor 400 por exemplo aumentar o tamanho aumentei o tamanho Se eu colocar aqui 100% deixa eu ver que que acontece 100% a control s é o 100% não vai aqui usando o atributo básico né que eu vou colocar aqui um valor 600 pixels ou 600 só não precisa colocar pixels ele já mostrou aqui para mim então uma página dentro da minha página eu peguei aquela página demite né que a gente fez só uma página separada e eu coloquei aqui dentro incorporei dentro do meu HTML certo eu posso também tirar

Inclusive essa essa borda porque o e fêmea como se fosse assim o mini navegador que está renderizando aquela outra página dentro da minha própria página como que eu faço para tirar essa bordinha para aparecer que não que aquela página tá aqui mesmo que esse conteúdo tá aqui mesmo eu posso fazer o seguinte eu posso colocar um estilo aqui só que isso é CSS né pessoal Deixa eu só fechar esse lado aqui com control b o vou colocar um Style um estilo CSS incorporado e eu vou colocar borda: Não ne eu não quero nenhuma borda e

quando eu dou um contra o Oeste Olha lá sumiu a borda parece que tá tudo dentro da minha própria página mas na verdade eu estou renderizando uma página externa legal isso pessoal é um arquivo que está dentro do meu próprio projeto certo equipe de ponta HTML mas é que eu poderia colocar qualquer outra página certa eu poderia colocar assim https://programação web.com.br salvei olha só o que que vai acontecer ele carregou a minha página do programação web dentro da minha página a que eu tava trabalhando Olha só que loucura tá aqui esse eu Navegar por aqui

ó vou navegar vou dar o login tudo normal vai rodar o site como se tivesse rodando por aqui como se aqui fosse um navegador dentro do navegador muito legal né pessoal muito muito louca essa opção assim né 12 frames a gente usei Friends também para videos do YouTube por exemplo O que é Rodar algum vídeo Então se precisar se eu for lá no YouTube Deixa maximizar aqui ó vou no YouTube vou entrar aqui no YouTube vou pegar um vídeo qualquer aqui que apareceu para mim deixa eu ver aqui qualquer vídeo vou pegar esse aqui do

pica-pau aí você aqui embaixo vai ter um botão chamado compartilhar tá vendo aqui ó você clica aqui em compartilhar você vai ter uma opção chamada incorporar nessa opção e incorporar olha só o que que tem aqui ó o iframe se você pega isso aqui copia control c copiei vou fechar aqui essa tag do essa tag não a sábado no YouTube se eu pegar aqui no meu código e colocar aqui embaixo a vou dar um BR vou apagar esse frame aqui que tá da programação web tá paguei ele se eu dar um controle aqui para colar

esse frame olha só o que que vai acontecer ele colocou aqui incorporou o vídeo do YouTube na minha página certo pessoal e aqui tem também a largura altura que eu posso diminuir aqui um pouquinho tamanho um pouquinho tamanho eu sei que eu posso esticar e diminuir também um pouquinho deixa eu ver aqui ó como é que vai ficar a ajustar né a imagem o vídeo de como eu quero que ele fique certo a gente usa use Friends também para isso use frames também tem um recurso muito interessante que é quando você clicar no link aquele

item Abrir dentro do iframe e por exemplo quando a pessoa que ficasse assim em sobre nós Em vez de o sobre nós a gente ir para uma outra pajem quando a gente clicasse aqui em sobre nós no iframe essa página ela fosse aberta aqui de forma dinâmica como que a gente faz isso então vou apagar isso aqui ó e vou mostrar para vocês um exemplo eu vou criar aqui um iframe o src vou deixar ele vazio não tem nada tá básico aqui eu vou colocar um name para ele uma propriedade não é como se eu

tivesse batizando esse frame então eu vou colocar aqui a meu meu traço e frame tá meu Extreme e vou colocar aqui um título o e frame de exemplo beleza criei meu Extreme aqui não tem nada Ele tava azulzinho aqui né Inclusive eu posso colocar aquele estilo para tirar a borda olha está Style borda Nunes aqui a gente ainda não viu isso é CSS tá pessoal mas só pra borda dele ficar invisível então a gente faz isso daí para ela não aparecer e eu vou colocar também que a largura dele vai ser sem por cento para

ele ficar na largura completa aqui da nossa página OK agora o que que eu vou fazer eu vou fazer aqui ó o nosso link sobre nós que tá aqui ó sobre nós Em vez de ele a diretamente aqui para página com HF só assim a gente pode colocar no target dele aqui ó Target e é qual que é o álbum lembra que a gente viu o target Blank o self care para própria página o Black para abrir uma outra página agora a gente pode colocar aqui ó o nome aqui no tablet ou qual que é

o alvo a gente pode colocar um name aqui no nosso e frame quer meu e Frame o meu e freio o alvo é meu e frame agora olha só que que vai acontecer quando eu clicar aqui em sobre nós Em vez de para a outra página ele realizou aquela página que a gente especificou no link aqui que a sobre ponta HTML dentro do nosso frame certo muito legal né pessoal eu poderia fazer a mesma coisa aqui com o Dimitri o target Qual que é o alvo vai ser meu traço e frame dessa forma tanto link

sobre nós como Dimitri tá é porque é para mostrar que direto no extremo então clique aqui ó mostrou sobre nós porque aqui ó motor demitiria sobre nós Dimitri na mesma página ele tá pegando páginas externas que eu tenho dentro do meu projeto e renderizando dentro da minha própria página principal então use frames eles me dão a capacidade de fazer isso rodar várias vários pedaços de páginas que eu posso até separados no meu projeto e colocar aqui de dentro onde eu quiser certo incorporar uma página de fora dentro de uma outra página inclusive com links que

podem ser rodadas aqui Antigamente era muito comum pessoal gente usar e frame para quase tudo a gente tinha um creme para o menu em cima um espreme para o conteúdo e tudo mais depois que o tempo essa prática não foi muito mais utilizada por que a gente usa para fazer sites dinâmicos outros recursos né Como o próprio pega P banco de dados e coisas que a gente vai ver mais para frente mas é legal saber que o HTML Tem suporte sim a esse tipo de coisa de você fazer seu site por exemplo modular né que

é ter pedaços do seu site em pastas diferentes e organizar eles aqui de forma que se você por exemplo precisar fazer uma manutenção A do menu lá em cima você não precisa em cada página HTML trocar aquele menos você só vai trocar a o HTML do menu que vai estar sendo chamado sempre pelos e frames em cada página e se você conseguir entender a ideia mas é bem legal isso daqui os enfermos são bem show de bola Espero que você tenha gostado dessa aula se você gostou deixa aquele seu like continua assistindo esse curso clicando

aqui num desses vídeos que vai estar aqui na tela para você continuar assistindo a Playlist e vendas outras aulas deste curso se inscreve no canal se não for inscrito e até a próxima aula valeu