Programação para Internet Aula 09 Os direitos desta obra foram cedidos à Universidade Nove de Julho
Este material é parte integrante da disciplina oferecida pela UNINOVE. O acesso às atividades, conteúdos multimídia e interativo, encontros virtuais, fóruns de discussão e a comunicação com o professor devem ser feitos diretamente no ambiente virtual de aprendizagem UNINOVE. Uso consciente do papel. Cause boa impressão, imprima menos.
Aula 09: Inserção de iframes com formatação em CSS inline e interno Objetivo: Esta aula aborda o elemento iframe e suas propriedades, o qual permite colocar um quadro com conteúdos no documento HTML. Abordaremos também como aplicar as regras CSS para estilizar o iframe. 1. O elemento iframe Esse elemento é utilizado para apresentar uma página web dentro de uma página web. Destina-se a colocar um quadro, com conteúdos, no documento. Os conteúdos de cada iframe podem ser blocos de texto ou mesmo documentos HTML independentes. Esse elemento utiliza o atributo src, que define o documento que será inserido no iframe. A sintaxe para se adicionar um iframe é: <iframe src="url">. Alguns navegadores mais antigos não dão suporte a ele. Nesse caso não será visível e podemos incluir um parágrafo para informar ao usuário. 1.1 Atributos opcionais para iframe Os atributos opcionais para iframe são apresentados a seguir: Atributo Valor Descrição frameborder 1 0 Define se deve ou não existir uma borda em torno do iframe. height pixels % Define a altura do iframe. longdesc URL Define a página que contém uma descrição longa do conteúdo de um iframe. marginheight pixels Define a margem superior (top) e inferior (bottom) de um iframe. marginwidth pixels Define a margem direita (right) e esquerda (left) de um
iframe name name Define um nome para um iframe (nome da janela). scrolling yes Define se deve ou não existir barras de rolagem no no iframe. auto src URL Define a URL do documento para mostrar no iframe. width pixels % Define a largura de um iframe. 1.2 Inserindo um iframe no documento Para inserir um iframe no documento utilizamos o atributo src, como mencionado anteriormente. O atributo src define o endereço do documento ou da página que será carregada no iframe. Veja um exemplo de uma página que contém um iframe. Nesse exemplo, o atributo src define o endereço do documento que deverá abrir dentro do iframe. <html> <head> <title>iframe</title> </head> <body> <html> <body> <iframe src="http://www.uninove.br" width="100%" height="300"> <!--Caso seu navegador não dê suporte a iframe aparecerá a mensagem --> <p>seu navegador não dá suporte ao iframe.</p> </body>
</html> </body> </html> Nesse exemplo também é definido o tamanho que o iframe terá, com as propriedades height e width. 1.3 Removendo a borda do iframe Quando inserimos um iframe, por padrão ele terá uma borda em volta. Para definir se o queremos com ou sem borda utilizamos o atributo frameborder. Definimos o valor do atributo igual a zero (0) para retirar a borda. <html> <head> <title>iframe</title> </head> <body> <html> <body> <iframe src="http://www.uninove.br" width="100" height="300" frameborder="0"> </body> </html> </body> </html>
1.4 Inserindo barras de rolagem no iframe Nem sempre temos espaço em nossa página para inserir um documento que seja do mesmo tamanho do iframe. Se dimensionarmos o iframe com menor tamanho do que o do documento, precisaremos das barras de rolagem da página. As barras de rolagem são definidas com o atributo scrolling e podem conter os valores yes, no, auto. Por padrão, essas barras aparecem no iframe se o conteúdo do documento for maior do que o iframe. Veja um exemplo: <iframe src="http://www.uol.com.br/" width="200" height="200" frameborder="1" scrolling="no"> 1.5 Utilizando iframe para abrir um link Um iframe pode ser utilizado como o quadro-destino para um link. O atributo target do elemento a (âncora) deverá conter o atributo name do iframe. <iframe src="http://www.uninove.br" name="iframe_a"> <p> <a href="http://www.w3schools.com" target="iframe_a">w3schools.com</a> </p> elemento. Devido ao atributo target conter o nome do iframe, o link será aberto nesse 2. Formatando iframe com CSS Podemos definir regras CSS para estilizar o iframe. Veremos como utilizá-las tanto inline como incorporada.
2.1 Definindo regra de estilo inline e incorporada As regras de estilo inline são aplicadas semelhantemente às dos outros elementos. No exemplo a seguir, estilizamos a borda na cor azul tracejada, e o tamanho do iframe é definido nas propriedades witdh e height. <iframe name='iframe1' src="http://www.w3schools.com" style="border: 5px dashed blue; width: 100%; height: 200px;"> Na definição das regras de estilo incorporada podemos definir as mesmas propriedades conforme apresenta o exemplo abaixo: <style type="text/css"> iframe{ border: 5px dashed blue; width: 100%; height: 200px;"> } </style> <iframe src="http://www.uninove.br" name="iframe_a"> <p> <a href="http://www.w3schools.com" target="iframe_a">w3schools.com</a> </p> <iframe name='iframe1' src="http://www.w3schools.com" Nesse exemplo temos dois iframes e ambos recebem a mesma formatação da regra de estilo.
2.2 Inserindo iframe em uma célula da tabela Como estudamos na aula anterior, a célula de uma tabela pode conter texto, links, imagens, listas, formulários e outras tabelas. Também podemos definir que o conteúdo da célula é um iframe. A figura a seguir ilustra uma tabela que dentro da célula na qual aparece a página da Uninove recebe um iframe com a propriedade src="http://www.uninove.br". Tabela contendo iframe
REFERÊNCIAS MARCONDES, C. A. HTML 4.0 fundamental: a base da programação para Web. 1. ed. São Paulo: Érica, 2005. SILVA, M. S. Criando sites com HTML sites de alta qualidade com HTML e CSS. São Paulo: Novatec Editora, 2008. SITES CONSULTADOS - http://www.w3schools.com/html/html_iframe.asp. Acesso em 13 nov. 2011. - http://www.w3schools.com/css/css_table.asp. Acesso em 13 nov. 2011.