Código do quadro. Iframe e Frame – o que são e qual a melhor forma de usar frames em HTML

Lar / Congela

Elemento

Molduras

O que isso faz ? </p> <p>Como inserir uma página em uma página HTML</span>? Para fazer isso você precisa usar <iframe>, que cria um quadro embutido no documento atual que exibe outro documento HTML.</p> <p>Mostrar</p> <p>Bloco de exibição.</p> <p>Código de exemplo</p> <p><span class="owsfdh4gxyc"></span></p> <h2>Poderoso, mas fácil de usar</h2> <p>Nos velhos tempos, havia muito web design <frame>elementos que estragam a vida de todo desenvolvedor. Quase sempre eram uma abordagem de design ruim. Felizmente, elemento <frame>foi descontinuado em HTML5. Mas <iframe>ou " <span>quadro embutido</span>» ainda está disponível. Será obsoleto na próxima versão? Talvez devêssemos evitá-lo? Existem vários usos válidos deste elemento ao criar uma página HTML. Mas é preciso entender o que é e como funciona para evitar erros.</p> <h3>Semelhanças e diferenças <iframe>E <frame></h3> <p>Ambos os elementos permitem criar um documento HTML separado. O link para o conteúdo do documento referenciado pela página web atual é indicado em <a href="https://ermake.ru/pt/iframe-i-frame-chto-eto-takoe-i-kak-luchshe-ispolzovat-freimy-v-html-ukazyvaem/">atributo src</a>.</p> <p><!-Вы можете сделать так --> <iframe src="http://example.com"> <!DOCTYPE html> <html> <head> . . . </head> <body> . . . </body> </html>

A principal diferença entre E <frame>é isso <iframe>garante o cumprimento da regra de que o documento HTML é uma prioridade. Contente <iframe>aparece dentro de um elemento que faz parte do documento atual. Por exemplo, considere este vídeo incorporado retirado do YouTube:</p> <p><span class="M2kSJbLbIgQ"></span></p> <p>O vídeo está claramente na página HTML e não em um painel separado. O elemento quebrou esse paradigma e permitiu que o documento exercesse controle sobre a janela do navegador, dividindo-a em vários pequenos painéis (frames), cada um dos quais exibindo um documento separado. Todas as outras diferenças entre e decorrem desta diferença básica.</p> <h3>Não refaça layouts baseados em frames com iframes</h3> <p>Algum dia você poderá se deparar com a tarefa de atualizar um site antigo que foi construído com frames. Você pode querer usar <iframe>e uma largura de layout fixa para recriar o mesmo pesadelo de painéis e soleiras independentes. Mas você não poderá usar o atributo target para abrir um link em um quadro separado. Você pode começar a procurar soluções JavaScript. Por favor, não faça isso.</p> <h3>Bons (e terríveis) usos <iframe></h3> <p>Existem vários casos de uso válidos <iframe>Para <a href="https://ermake.ru/pt/karta-izobrazheniya-v-html-sozdanie-karty-izobrazheniya-v-html-atributy-tega/">Criação de HTML</a> páginas:</p> <ul><li>incorporação de conteúdo de mídia de terceiros;</li> <li>incorporar seu próprio conteúdo de mídia por meio de um documento multiplataforma;</li> <li>incorporação de exemplos de código;</li> <li>incorporação de “applets” de terceiros como formas de pagamento.</li> </ul><p>Aqui estão alguns casos de uso terríveis: <iframe>:</p> <ul><li>Galeria de fotos;</li> <li>fórum ou bate-papo.</li> </ul><p>Se você precisar incorporar documentos HTML pré-existentes e independentes no atual, use <iframe>. Se você estiver criando tudo do zero, não há razão para dividir o design da página em vários documentos separados. Especialmente se não forem conteúdos independentes.</p> <h3>atributos de iframe</h3> <table border="1"><tbody><tr><td><span>Nome do atributo</span> </td> <td>Significado</td> <td>Descrição</td> </tr><tr><td>caixa de areia</td> <td>Permitir mesma origem <br>Permitir navegação superior <br>Permitir formulários <br>Permitir scripts</td> <td>Define uma série de restrições ao conteúdo carregado no quadro. Definir antes <span>como criar uma página HTML.</span> </td> </tr><tr><td>rolagem</td> <td>sim não automático</td> <td>Determina se serão exibidos pergaminhos no quadro ou não. Obsoleto em HTML5. Use CSS em vez disso.</td> </tr><tr><td>Nome</td> <td>Nome</td> <td>Especifica o nome do quadro.</td> </tr><tr><td>Alinhar</td> <td>esquerda direita superior <br>meio inferior</td> <td>Determina o alinhamento do quadro em relação aos elementos circundantes. Está desatualizado. Use CSS em vez disso.</td> </tr><tr><td>borda do quadro</td> <td>sim (ou 1) <br>não</td> <td>Usado para ativar a exibição de uma borda ao redor do quadro. Obsoleto em HTML5. Use CSS em vez disso.</td> </tr><tr><td>longodesc</td> <td>URL</td> <td>Usado para especificar o URL de uma página que contém uma descrição longa do conteúdo do quadro. Está desatualizado. Use CSS em vez disso.</td> </tr><tr><td>largura de margem</td> <td>pixels</td> <td>Usado para controlar a largura do preenchimento desde o conteúdo até a borda do quadro. Está desatualizado. Use CSS em vez disso.</td> </tr><tr><td>fonte</td> <td>URL</td> <td>Especifica o URL do documento a ser exibido no IFRAME.</td> </tr><tr><td>vespaço</td> <td>pixels</td> <td>Define as margens verticais do quadro para o conteúdo circundante. Está desatualizado. Use CSS em vez disso.</td> </tr><tr><td>largura</td> <td>pixels%%</td> <td>Define a largura do quadro em uma página HTML.</td> </tr></tbody></table><p>Esta publicação é uma tradução do artigo “ <iframe>", elaborado pela simpática equipe do projeto</p> <p>Um quadro é uma área incorporada em um documento que exibe outro. A utilização ou não deste recurso é determinada pelo desenvolvedor. Nem sempre...</p> <h1></h1> <h3>Da Masterweb</h3> 11.07.2018 19:00 <p>Um recurso web projetado profissionalmente é um produto completo e em desenvolvimento, uma apresentação sistemática de informações, design original e lógica interativa para trabalhar com muitos visitantes.</p><p>Um site é a cara de uma organização, o cartão de visita do proprietário, a classificação do desenvolvedor e um sistema totalmente funcional para apresentar determinadas informações que funcionam em uma área específica para resolver problemas claramente definidos.</p><h2>O conceito e propósito de “iframe”</h2><p>Os frames não tiveram o melhor desempenho quando o padrão HTML ofereceu a opção de frame. A situação não melhorou muito com o advento do iframe. Os navegadores e proprietários de sites não estão muito dispostos a concordar em exibir informações de terceiros por meio de tais elementos.</p><p>Um frame não é uma janela pop-up ou uma tentativa de forçar algo ao visitante. Também é possível entender um desenvolvedor de recursos que não deseja que seu produto seja exibido no site de outra pessoa como um “dançarino reserva” de fundo.</p><p>No entanto, há um número suficiente de aplicações quando tanto o desenvolvedor de um recurso web (ou documento) quanto o desenvolvedor-consumidor desse recurso em seu produto estão interessados um no outro. Por exemplo, mapas do Google ou vídeos do Youtube. Existem outras ideias populares: previsões meteorológicas, dinâmica das taxas de câmbio, leituras de instrumentos, dados estatísticos.</p><p>Um frame é uma janela para o mundo dos dados que alguém coleta, processa e apresenta em seu recurso da web. Também oferece acesso a eles por meio de um frame no site do consumidor, geralmente por meio de um sistema de requisitos ou de uma API (biblioteca de funções) especializada.</p><h2>HTML "iframe": exemplo de condições a serem aplicadas</h2><p>Nem todo site pode ser exibido em um iframe. Antes de planejar o uso de um frame em seu site, o desenvolvedor deve concordar com o proprietário do recurso ou documento da web que pretende exibir em seu site de uma forma ou de outra. Por exemplo, um vídeo do YouTube pode ser incluído em uma tag de quadro conforme mostrado abaixo (clicado <a href="https://ermake.ru/pt/pusk-otkryvaetsya-tolko-pravoi-knopkoi-v-perestal-rabotat-pusk/">botão direito</a> passe o mouse sobre o vídeo do site do desenvolvedor).</p><br><img src='https://i0.wp.com/nastroy.net/pic/images/post/99499-1531321217.jpg' width="100%" loading=lazy loading=lazy><p>Ao copiar o “código HTML” fornecido, você pode colar com segurança o fluxo de vídeo desejado em seu site. A tag indicará tudo que você precisa: dimensões e condições de exibição. É conveniente colocar a tag “iframe” em uma div HTML - isso permitirá o posicionamento ideal de conteúdo de terceiros em seu próprio site.</p><h2>Recursão e Frames: Um Exemplo Prático</h2><p>É duvidoso que o iframe tenha um destino melhor que o frame. O desenvolvimento da análise e a relevância das informações coletadas de acordo com critérios tornam ilusórias as perspectivas de exibir o conteúdo de outra pessoa em um formato “como está”. O formato “como deveria” está se tornando preferível.</p><p>No entanto, hoje é ideal (e na ordem das coisas) usar os desenvolvimentos do Google e do YouTube, bem como recursos meteorológicos, políticos, estatísticos, musicais, jogos e outros recursos projetados para frame ou outro uso de terceiros.</p><br><img src='https://i2.wp.com/nastroy.net/pic/images/post/182980-1531321217.jpg' width="100%" loading=lazy loading=lazy><p>No exemplo acima, há três exemplos de "iframe" HTML:</p><ul><li>Mapa do Google;</li><li>vídeo de um site de terceiros;</li><li>vídeo do Youtube.</li> </ul><p>O último e quarto quadro leva ao site onde todos esses quadros estão localizados. A imagem à esquerda é o site após o carregamento. A imagem à direita é um site sendo exibido depois de algum tempo (o vídeo em cada quadro “flui” em seu próprio ritmo), mas o controle deslizante em (4!) está deslocado para baixo. Você pode ver claramente que o mapa e o vídeo ainda são exibidos, mas a exibição em si não funcionou.</p><p>O código para o "iframe" e o estilo deste exemplo são mostrados abaixo.</p><img src='https://i2.wp.com/nastroy.net/pic/images/post/888881-1531321218.jpg' height="631" width="615" loading=lazy loading=lazy><p>Colocar um quadro em um div é conveniente não apenas do ponto de vista do posicionamento. O quadro pode ser criado instantaneamente. JavaScript permite criar tags HTML, incluindo frames. JavaScript é uma linguagem completa que atende todo o conteúdo <a href="https://ermake.ru/pt/k-neobyazatelnym-atributam-tega-img-otnosyatsya-tegi-html-dlya-vstavki-kartinki/">Páginas HTML</a>. Pode funcionar de forma recursiva, adaptativa e adaptar-se aos interesses do visitante durante o processo de diálogo.</p><p>O quadro não é apenas estático. Seu conteúdo é separado do conteúdo da página em que é postado. Você pode encontrar maneiras de trocar informações entre recursos realmente diferentes, mas isso faz parte de uma série de problemas de troca de informações entre diferentes domínios.</p><p>Mas não é apenas a troca de informações e a recursão que o HTML não controla totalmente. Iframe é um exemplo de tag que precisa ser testada com especial cuidado em uma situação específica antes de ser usada.</p><p>Nem todos os sites concordam e nem todos os conteúdos estão disponíveis. Não é apenas uma questão de direitos autorais. A capacidade de exibir informações em um quadro pode ser afetada pelo navegador, pelo visitante, pelo desenvolvedor do recurso ou pelo servidor no qual o recurso está hospedado.</p><h2>Análise própria ou conteúdo de terceiros</h2><p>O que são frames em termos de conteúdo do site? Esta é a sua adição. O desenvolvedor está criando uma plataforma web para negociação de unidades de títulos Webmoney, e sua decisão de colocar uma janela com a dinâmica das taxas de câmbio é razoável. O conteúdo diretamente da própria exchange é mais promissor do que a análise e o desenvolvimento interno.</p><p>O desenvolvedor está criando uma loja de bens de consumo, e seu desejo de oferecer ao visitante a oportunidade de visualizar o site do fabricante de cada produto é uma tarefa difícil, mas atrativa para o cliente. Talvez essa estratégia torne a loja melhor do que aquelas que analisam os sites dos fabricantes de produtos e, na maioria das vezes, dos concorrentes.</p><br><img src='https://i1.wp.com/nastroy.net/pic/images/post/958883-1531321219.jpg' width="100%" loading=lazy loading=lazy><p>O que é um quadro de provedor de conteúdo? Esta é a prestação de informações. Em essência, isso é uma estabilização do trabalho da empresa, que pode não criar seu próprio site para trabalhar, mas focar especificamente no uso de frames. Em particular, não há dúvida de que o Google Maps é uma ótima ideia, mas é ideal numa aplicação específica:</p><ul><li>agência de viagens - rotas e mapa de trânsito;</li><li>entrega de carga – cálculos de rota, custos financeiros, recargas de combustível, etc.;</li><li>navegadores para cidades e regiões...</li> </ul><p>Nesse contexto, as molduras são procuradas; elas tornam o site mais prático. Além disso, o desenvolvedor pode simplesmente criar uma janela para conteúdo de terceiros. HTML "iframe" é um exemplo de divisão prática de trabalho. Uma organização fornece informações, outra as fornece ao cliente.</p><br><img src='https://i2.wp.com/nastroy.net/pic/images/post/221278-1531321219.jpg' width="100%" loading=lazy loading=lazy><p>É difícil dizer o que o futuro reserva para a programação da Internet. Tudo está se desenvolvendo de forma muito dinâmica e o componente de hardware oferece cada vez mais oportunidades. Talvez o iframe HTML seja um exemplo de combinação ideal de vários recursos da web e tecnologias da Internet. Talvez esta seja apenas uma etapa no caminho para a formação de ideias mais promissoras.</p><p>Em qualquer caso, a tag iframe é usada e é muito procurada em uma ampla gama de tarefas práticas.</p> <p>Rua Kievyan, 16 0016 Armênia, Yerevan +374 11 233 255</p> <p>No início da construção de sites, os recursos da web usavam amplamente frames para exibir partes individuais das páginas. Mas com a chegada <a href="https://ermake.ru/pt/skachat-novuyu-versiyu-aityuns-russkaya-versiya-aityuns-dlya-kompyutera/">nova versão</a> HTML 5 mudou tudo. Elementos de marcação<<i>quadro</i>>, <<i>conjunto de quadros</i>> e<<i>sem quadros</i>> são considerados obsoletos. Eles foram substituídos por uma única tag -<<i>iframe</i>>. Como adicionar ao HTML <iframe>? O exemplo abaixo ficará claro até para um iniciante em programação.</p><h2>O que são molduras?</h2><p>O quadro é a base da maioria das primeiras páginas da web. Se traduzida literalmente, esta palavra significa “frame”, ou seja, um frame é uma pequena parte de uma página em um navegador. O uso generalizado de frames no passado pode ser explicado pela baixa qualidade e alto custo do tráfego da Internet. Via de regra, o site era dividido em 3 a 5 partes, cada uma com uma finalidade específica:</p><ul><li>“cabeçalho” (quadro superior ao longo da largura da página) - exibe o nome do recurso;</li><li>“vidro” esquerdo/direito - exibição do menu;</li><li>O quadro central é uma exibição do conteúdo do site.</li> </ul><p>A divisão da página em partes possibilitou sobrecarregar apenas uma determinada parte na atualização. Por exemplo, o usuário clicou em um item de menu e o novo conteúdo foi baixado no quadro central.</p><h2>Quadros Modernos em HTML 5</h2><p>Por que é necessário em HTML?<<i>iframe</i>>? Um exemplo é a inserção de conteúdo de um recurso de terceiros. A situação clássica é quando um desenvolvedor web deseja mostrar a localização de um objeto em um mapa. O que devo fazer? Desenhar uma planta do local do zero? Não - existe uma solução mais simples: incorpore um elemento Google Map, Yandex Maps ou 2GIS na página. O problema é resolvido em quatro etapas.</p><ol><li>Você precisa acessar o site de qualquer serviço de mapeamento.</li><li>Encontre o objeto desejado. Depois de saber o endereço exato, você pode inseri-lo na janela de pesquisa.</li><li>Usando o botão “Salvar e obter código” (para Yandex.Maps) ou “Concluído” (para <a href="https://ermake.ru/pt/sputnikovaya-karta-mira-onlain-ot-google-karty-gugl-google-maps-gugl/">Google Mapas</a>) obtenha o código de incorporação.</li><li>Resta apenas inserir as tags de marcação geradas na página.</li> </ol><p>Além disso, você pode selecionar o tamanho do mapa e configurar outras opções de exibição.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/47242/1650473.jpg' width="100%" loading=lazy loading=lazy></p><p>De que outra forma você pode usá-lo em HTML?<<i>iframe></i>? Um exemplo é a inserção de materiais de vídeo do recurso Youtube. As tecnologias multimídia atraem usuários da Internet, razão pela qual o conteúdo de vídeo é tão popular. O desenvolvedor cuidará da instalação do vídeo rapidamente.</p><ol><li>Você deve enviar seu próprio vídeo para o Youtube ou encontrar um arquivo de terceiros para transmitir.</li><li>Obtenha a tag selecionando o botão "Código HTML"</li><li>A etapa final é colar em <iframe>. Um exemplo do conteúdo da tag resultante será discutido abaixo.</li> </ol><p>Ambos os exemplos usaram geração automática de código, mas os desenvolvedores profissionais devem ser capazes de escrever código por conta própria. Em primeiro lugar, isto permitirá compreender o layout da página e, se necessário, modificá-lo. Em segundo lugar, a marcação dos elementos do site (mesmo pertencendo a um recurso externo) nem sempre é formada sem a participação do webmaster. É aqui que entram em jogo as altas qualificações do desenvolvedor.</p><p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/47242/1650474.jpg' width="100%" loading=lazy loading=lazy></p><h2>Sintaxe</h2><p>Portanto, antes de começar a fazer o layout da página, você precisa considerar a tag iframe (html): o que é e como usá-la corretamente.</p><p>Em primeiro lugar, deve-se observar que a tag está emparelhada. Entre os elementos de abertura e fechamento indique o conteúdo que será exibido em navegadores que não suportam este elemento de marcação. Principais atributos da tag:</p><ul><li>largura(largura);</li><li>altura(altura);</li><li>src (endereço do recurso baixado);</li><li>alinhar(método de alinhamento);</li><li>borda do quadro;</li><li>permitir tela cheia.</li> </ul><p>Assim, o código para <iframe>. O exemplo HTML é demonstrado na íntegra abaixo:</p><p><i><iframe width="560" height="315" src= "https://someserver.com/" frameborder="0" allowfullscreen>

Na marcação acima, basta substituir o endereço do site por qualquer outro e, se necessário, ajustar o tamanho do frame.

Frames são elementos HTML que permitem dividir uma janela do navegador da web em várias janelas independentes, cada uma das quais pode carregar um documento HTML separado. Cada uma dessas janelas (quadro) pode ter suas próprias barras de rolagem e funcionar independentemente de outras janelas independentes ou, pelo contrário, controlar seu conteúdo. Eles podem ser usados para organizar um menu que fica constantemente localizado em uma janela, enquanto as próprias informações estão localizadas em outra janela. Os usuários podem acessar o menu a qualquer momento sem precisar retornar ao página anterior para selecionar outro item de menu. O uso de frames permite “fixar” imagens ou outros elementos estáticos da interface na janela do navegador enquanto o restante da página rola dentro do frame.
Porém, é importante ressaltar que hoje em dia os frames são considerados uma ferramenta ultrapassada, e os sites com frames passaram a ser considerados indignos, já que webmasters profissionais nunca utilizam frames em seus projetos. Os frames têm vários problemas notórios. Eles confundem os mecanismos de busca, por exemplo, porque as páginas que contêm o conteúdo não possuem links para outros documentos. Se você deseja receber visitantes de motores de busca, esqueça os quadros. É impossível para um usuário colocar uma página de sua preferência na seção de favoritos do navegador, pois os frames ocultam o endereço da página em que ele está localizado e sempre mostram apenas o endereço do site. Por esse motivo, eles criam problemas para os navegadores na hora de rastrear o histórico e também não são muito adaptáveis a diferentes tamanhos de tela e dispositivos móveis.
Apesar de projetos com molduras serem encontrados em rede mundial de computadores cada vez mais raro, aprender HTML seria incompleto sem abordar o tópico de frames. Os frames, juntamente com as suas desvantagens, também apresentam algumas vantagens que não nos permitem descartar esta tecnologia como pouco promissora.

Criando Molduras

A estrutura de um documento HTML com frames é muito semelhante ao formato de um documento HTML normal. Como em um documento HTML normal, todo o código é colocado entre tags emparelhadas E , e no contêiner os cabeçalhos estão localizados. A principal diferença entre um documento com frames e um documento HTML normal é que um documento com frames em vez de uma tag tag pareada é aplicada (do conjunto de molduras em inglês - um conjunto de molduras).
O exemplo a seguir mostra a estrutura de um documento HTML com frames:

Exemplo: Estrutura de Documento HTML com Quadros

Experimente você mesmo »

frame_top
quadro_esquerdo	quadro_direita

Documento com molduras

No exemplo acima, a página contém três áreas, cada uma delas inicialmente carregada com documentos HTML frame_top.html, frame_left.html e frame_right.html. Além dos documentos HTML, um quadro também pode conter gráficos. Para fazer isso, você precisa especificar o endereço da imagem correspondente no atributo fonte, Por exemplo src="imagem.gif". Observe que o elemento usado sem uma tag de fechamento.
Dentro do contêiner só pode conter tags ou outro conjunto de frames cobertos por tags E .
Marcação tem os seguintes atributos:

linhas— descreve como dividir uma página em linhas:
colunas— descreve como uma página é dividida em colunas:

As áreas resultantes desta divisão de páginas serão frames. A ausência desses atributos define um único quadro que ocupará toda a janela do navegador.

No significado dos atributos linhas E colunasÉ necessário indicar não o número de linhas ou colunas, mas a largura e altura dos quadros. Todos os valores da lista são separados por vírgulas. As dimensões podem ser especificadas em unidades absolutas (pixels) ou porcentagens:

colunas = "20%, 80%"— a janela do navegador é dividida em duas colunas usando o atributo colunas, a coluna esquerda ocupa 20% e a direita 80% da janela do navegador.
linhas = "100, *" A janela do navegador é dividida em duas janelas horizontais usando o atributo linhas, a janela superior ocupa 100 pixels e a janela inferior ocupa o espaço restante especificado pelo símbolo de asterisco.

Como pode ser visto neste exemplo, o contêiner com atributo linhas primeiro cria dois quadros horizontais e substitui o segundo quadro por outro que divide o quadro horizontal inferior em duas colunas usando o atributo colunas, a coluna esquerda ocupa 20% e a direita 80% da janela do navegador.
Se o navegador não suportar frames, a janela exibirá o texto localizado entre as tags . Tudo entre as tags , é ignorado por navegadores que suportam frames. Assim, o desenvolvedor precisa escrever um código que duplique o conteúdo dos frames por outros meios, e colocar esse código no container

Quadros flutuantes

Elemento </b>(uma abreviatura do termo em inglês “quadro flutuante”) permite incorporar um documento HTML separado ou outro recurso em qualquer lugar de uma página da web. O conteúdo de um quadro flutuante (incorporado) pode ser qualquer página HTML, do seu recurso ou de outro site. Como você já entendeu, os frames ociosos são criados usando o elemento <b><iframe> </b>, que, diferentemente da tag <b><frame> </b> não inserido entre tags <b><frameset> </b> E <b></frameset> </b> e entre tags <b><body> </b> E <b></body> </b> .<br>No elemento <b><iframe> </b> você pode usar os mesmos atributos do quadro <b></frame> </b>, exceto para o atributo <b>tamanho normal</b>— diferentemente dos frames normais, os frames integrados não podem ser redimensionados na tela:</p> <table class="table table-bordered"><tr><th>Atributo</th><th>Descrição</th> </tr><tr><td>fonte</td><td>usado para especificar o URL da página a ser exibida no quadro</td> </tr><tr><td>altura</td><td>define a altura da janela do quadro flutuante em pixels ou%</td> </tr><tr><td>largura</td><td>define a largura da janela do quadro flutuante em pixels ou%</td> </tr><tr><td>nome</td><td>o nome do quadro pelo qual pode ser acessado nos links</td> </tr><tr><td>borda do quadro</td><td>define o enquadramento para quadros, pode assumir valores 1 (há enquadramento) ou 0 (sem enquadramento) ( <b>Não suportado em HTML5</b>) </td> </tr><tr><td>largura de margem</td><td>preenchimento à esquerda e à direita do conteúdo até a borda do quadro ( <b>Não suportado em HTML5</b>) </td> </tr><tr><td>altura da margem</td><td>recuo acima e abaixo do conteúdo até a borda do quadro ( <b>Não suportado em HTML5</b>) </td> </tr><tr><td>rolagem</td><td>determina o tipo de barras de rolagem do quadro e assume os valores sim (há barras), não (sem barras) e automático (as barras aparecem se necessário) ( <b>Não suportado em HTML5</b>) </td> </tr><tr><td>permitir tela cheia</td><td>Permite que o quadro entre no modo de tela cheia</td> </tr><tr><td>hspace</td><td>Margem horizontal do quadro ao conteúdo circundante</td> </tr><tr><td>vespaço</td><td>espaço vertical do quadro ao conteúdo circundante</td> </tr><tr><td>alinhar</td><td>define o alinhamento do quadro</td> </tr></table><p>No exemplo a seguir, as dimensões do quadro flutuante são especificadas em pixels, mas você também pode especificá-las em %:</p><p> <iframe src="demo_iframe.htm" width="200" height="200">

Instruções

A linguagem HTML (HyperText Markup Language) fornece dois tipos de frames. “Flutuante” é mais flexível e mais fácil de inserir em um já existente. EM caso geral A construção que descreve a inserção de uma janela usando uma moldura flutuante é semelhante a esta: Aqui, o site existente (atributo src) é especificado como fonte de dados para este quadro. Ele será aberto em um quadro de 400 por 300, conforme indicado nos atributos de largura e altura. Você também pode especificar a página do seu site no atributo src. Neste caso, basta especificar um endereço relativo (ou seja, um endereço relativo à página onde o quadro está inserido): Neste exemplo, a altura do quadro não é especificada, mas existe um atributo id. Usando-o você pode usando CSS() defina as dimensões necessárias para este quadro:

Outro tipo de frames - “clássico” - requer uma página separada que conterá uma descrição da estrutura dos frames. Os próprios frames estarão localizados em páginas separadas, talvez até em sites separados. O código HTML dessa página contêiner para frames pode ser assim:

Sem bloqueios ... E ... , que são obrigatórios para páginas normais, não deveriam estar aqui. Neste exemplo, a tag de abertura do contêiner. contém o atributo rows - isso significa que o espaço da página deve ser dividido verticalmente e o primeiro quadro será fornecido parte superior. Se você substituir linhas por colunas, a divisão será horizontal. O valor deste atributo "*,*" indica que as proporções de divisão são iguais - 50% cada. Se você especificar, por exemplo, “20%,*”, então apenas 20% será dado ao primeiro quadro, e o restante do espaço será dado ao segundo. O usuário pode alterar essas proporções arrastando as bordas do. os frames com o mouse, mas é possível proibir esta ação. Para fazer isso, você precisa adicionar o atributo noresize à tag de um quadro específico. Você também pode especificar o tamanho das margens verticais e horizontais do quadro adjacente (atributos marginwidth e marginheight): É possível definir regras comportamentais para barras de rolagem de cada quadro separadamente. Isso é feito usando o atributo scrolling, que pode conter um dos três valores predefinidos. Se você especificar scrolling="auto", as barras de rolagem aparecerão quando o conteúdo do quadro não couber em seus limites. Se "sim" - as listras estarão presentes constantemente, independentemente de serem necessárias. Se "não" - isso significará que as barras de rolagem estão desativadas para este quadro.

Com base nas informações apresentadas nas duas etapas anteriores, você precisa construir o código HTML mais adequado para solucionar o seu problema. Depois disso, resta inseri-lo no código-fonte da página. Para fazer isso, você pode usar o editor de páginas do sistema de gerenciamento do seu site - abra a página desejada nele, mude para o modo de edição do código HTML e cole seu código no local desejado da página. Você pode baixar o arquivo? código fonte hospedagem de gerenciamento de gerenciador de arquivos de página ou sistema de gerenciamento de conteúdo, abra-o em editor de texto e cole o código nele. E então use o mesmo método para carregar o código alterado de volta ao servidor.

Criando Molduras

Exemplo: Estrutura de Documento HTML com Quadros

Quadros flutuantes

Escolha do Editor