Início
1
Curso de HTML - Aula 6 - Frames Qui 20 Dez 2012, 20:24
Halt
Administrador
Mensagens : 1662
AP's : 2147483645
Respeito : 61Idade : 24
Localização : Rio de Janeiro
[Autor: Gleison]
O conceito de paginas frames é antigo, no inicio a ideia era dar mais interatividade na página, entretanto
não havia muito suporte por parte dos navegadores, porem quando ele ganhou suporte começou a
surgir a Web 2.0 que trazia uma maior interatividade fazendo com que os frames entrassem em desuso.
Todos nós estamos acostumados com frames, entretanto muitos nem sabem. Ao alternar entre uma
anela da configuração de vídeo do seu sistema operacional, você está alternando entre frames.
Pois bem o conceito é esse uma pagina frame e apenas uma moldura que chama outras paginas, sendo
assim na pagina do frame não existe conteúdo.
deve vir acompanhado do atributo rows ou cols que este fará a identificação de qual será a posição das
divisórias.
Crie um novo documento com o nome ex5.html e digite os codigos necessários para a pagina ate o tag <
head>.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
</HTML>
Agora vamos inserir os tags de referencia para o frame, acrescente o seguinte código <frameset
cols="20,80">
<frame src=”ex4.html” name=”esquerdo”>
<frame src=”ex3.html” name=”direito”>
</frameset>
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset cols="20,80">
<frame src=”ex4.html” name=”esquerdo”>
<frame src=”ex3.html” name=”direito”></frameset>
</HTML>
Salve seu arquivo e abra-o no navegador, veja que temos uma pagina dividida em duas partes onde na
esquerda está aberta a página ex4.html e na direita a página ex3.html.
Vejamos o que acabamos de fazer, quando foi definido o atributo cols, nos definimos que seria uma
pagina com divisões verticais e os valores 20 e 80 como o tamanho para cada lado da divisão, sendo que
se quiséssemos mais uma divisão bastaria acrescentar mais um valor.
O atributo name foi colocado para a orientação de links, que será aprendido mais para a frente.
O que definiu onde cada pagina seria aberta neste caso, foi a ordem na qual foram citadas.
Agora vamos inserir os tags de referencia para o frame, modifique o código no lugar de cols coloque
rows, e no lugar de esquerdo e direito coloque acima e abaixo, e salve o documento e o atualize no
navegador.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="20,*">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>
Volte ao ex5.html e modifique o código: onde está 80 coloque *.
Salve o documento e atualize no navegador.
Salve o documento e atualize no navegador.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="20,*">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>
O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 20 pixels e
ocupar o restante do espaço na pagina.
Volte ao ex5.html e modifique o código: onde está 20 coloque 40%.
Salve o documento e atualize no navegador.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,*">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 40% da pagina e o segundo
O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 40% da pagina e o segundo
deve ocupar o restante do espaço na pagina.
Volte ao ex5.html e modifique o código: onde está * coloque 60%.
Salve o documento e atualize no navegador.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,60%">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</HTML>
O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 40% da pagina e o segundo
deve ocupar 60% do espaço na pagina.
ser usado scroll.
Para isso usamos os atributos border, frameborder, noresize, scrolling.
Salve o documento e atualize no navegador. Veja que agora é exibido uma borda entre as duas páginas
deve ocupar o restante do espaço na pagina.
que elas tem a largura de 3 pixels.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,60%" frameborder=”Yes” border=”3”>
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>
O que fizemos agora é dizer para o navegador que o recurso de bordas deve estar ativado (opção
frameborder com o valor “Yes” permite bordas, já com o valor “no” elas não aparecerão)e que a borda
deve ter a espessura de 3 pixels.
bloqueando o redimensionamento e o scrolling.
Volte ao ex5.html e adcione o seguinte código na primeira linha frame src: noresize=”noresize”
scrolling=”yes”
Salve o documento e atualize no navegador. Veja que agora é exibido uma borda entre as duas páginas e
que elas tem a largura de 3 pixels.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,60%" frameborder=”Yes” border=”3”>
<frame src=”ex4.html” name=”acima” noresize=”noresize” scrolling=”yes”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>
O que fizemos agora é dizer para o navegador que o recurso de redimensionamento deve estar
desativado (opção noresize com o valor “noresize” permite redimensionamento, para permitir o
redimensionamento e só não adcionar o noresize )e que o recurso de scrolling deve estar ativado(opção
scrolling com o valor “yes” permite scrolling, para não permitir o scrolling e só usar o valor “no”).
exibidas caso o navegador não ofereça suporte, para isso usamos o tag <noframes> antes do tag <body>
Faça as modificações afim de que seu documento esteje como o abaixo.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,60%" frameborder=”Yes” border=”3”>
<frame src=”ex4.html” name=”acima” noresize=”noresize” scrolling=”yes”>
<frame src=”ex3.html” name=”abaixo”>
<body><noframes>[b]Esta pagina usa o recurso de frames, porém seu navegador não suporta este recurso.<BR>
Aconselhamos que atualizasse seu navegador por uma versão mais recente.
</noframes>
</body></HTML>
O que fizemos agora é inserir uma mensagem que será mostrada em um navegador que não ofereça o
suporte a frames, lembrando que neste ponto você pode criar uma pagina completa.
ExercícioCrie uma pagina:
Nome:exepratico3.html
Titulo:Exercicio Pratico 3
Texto Centralizado: Aulas de HTML
Pule uma linha
Texto Restante: Crie uma página usando todos os recursos até aqui apresentados.
Crie uma pagina:
Nome:exepratico4.html
Titulo:Exercicio Pratico 4
Texto Centralizado: Aulas de HTML
Pule uma linha
Texto Restante: Crie uma página usando todos os recursos até aqui apresentados.
Crie uma pagina frame:
Nome:exepratico5.html
Titulo:Exercicio Pratico 5
Divisão: 2 divisões verticais (uma com nome esquerda e a outra como direito)
Divisão esquerda: Nesta pagina deve aparecer o exepratico3.html
Divisão direito: Nesta pagina deve aparecer o exepratico4.html
O que são paginas frames?
O conceito de paginas frames é antigo, no inicio a ideia era dar mais interatividade na página, entretanto
não havia muito suporte por parte dos navegadores, porem quando ele ganhou suporte começou a
surgir a Web 2.0 que trazia uma maior interatividade fazendo com que os frames entrassem em desuso.
Todos nós estamos acostumados com frames, entretanto muitos nem sabem. Ao alternar entre uma
anela da configuração de vídeo do seu sistema operacional, você está alternando entre frames.
Pois bem o conceito é esse uma pagina frame e apenas uma moldura que chama outras paginas, sendo
assim na pagina do frame não existe conteúdo.
Usando frames
Para criarmos uma pagina com frame usamos o tag <frameset></frameset> logo após o tag <head>, ele deve vir acompanhado do atributo rows ou cols que este fará a identificação de qual será a posição das
divisórias.
Crie um novo documento com o nome ex5.html e digite os codigos necessários para a pagina ate o tag <
head>.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
</HTML>
Agora vamos inserir os tags de referencia para o frame, acrescente o seguinte código <frameset
cols="20,80">
<frame src=”ex4.html” name=”esquerdo”>
<frame src=”ex3.html” name=”direito”>
</frameset>
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset cols="20,80">
<frame src=”ex4.html” name=”esquerdo”>
<frame src=”ex3.html” name=”direito”></frameset>
</HTML>
Salve seu arquivo e abra-o no navegador, veja que temos uma pagina dividida em duas partes onde na
esquerda está aberta a página ex4.html e na direita a página ex3.html.
Vejamos o que acabamos de fazer, quando foi definido o atributo cols, nos definimos que seria uma
pagina com divisões verticais e os valores 20 e 80 como o tamanho para cada lado da divisão, sendo que
se quiséssemos mais uma divisão bastaria acrescentar mais um valor.
O atributo name foi colocado para a orientação de links, que será aprendido mais para a frente.
O que definiu onde cada pagina seria aberta neste caso, foi a ordem na qual foram citadas.
Agora vamos inserir os tags de referencia para o frame, modifique o código no lugar de cols coloque
rows, e no lugar de esquerdo e direito coloque acima e abaixo, e salve o documento e o atualize no
navegador.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="20,*">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>
Criando frames relativos.
Outro recurso que pode ser usado em frames é criar frames relativos. Volte ao ex5.html e modifique o código: onde está 80 coloque *.
Salve o documento e atualize no navegador.
Salve o documento e atualize no navegador.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="20,*">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>
O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 20 pixels e
ocupar o restante do espaço na pagina.
Volte ao ex5.html e modifique o código: onde está 20 coloque 40%.
Salve o documento e atualize no navegador.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,*">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 40% da pagina e o segundo
O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 40% da pagina e o segundo
deve ocupar o restante do espaço na pagina.
Volte ao ex5.html e modifique o código: onde está * coloque 60%.
Salve o documento e atualize no navegador.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,60%">
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</HTML>
O que fizemos agora é dizer para o navegador que o primeiro frame deve ter 40% da pagina e o segundo
deve ocupar 60% do espaço na pagina.
Permitindo ou não bordas e scroll e redimensionamento.
Com frames também podemos definir se as bordas aparecerão e se serão redimensionáveis e se poderser usado scroll.
Para isso usamos os atributos border, frameborder, noresize, scrolling.
Inserindo bordas.
Volte ao ex5.html e adcione o seguinte código a linha frameset: frameborder=”Yes” border=”3”Salve o documento e atualize no navegador. Veja que agora é exibido uma borda entre as duas páginas
deve ocupar o restante do espaço na pagina.
que elas tem a largura de 3 pixels.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,60%" frameborder=”Yes” border=”3”>
<frame src=”ex4.html” name=”acima”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>
O que fizemos agora é dizer para o navegador que o recurso de bordas deve estar ativado (opção
frameborder com o valor “Yes” permite bordas, já com o valor “no” elas não aparecerão)e que a borda
deve ter a espessura de 3 pixels.
bloqueando o redimensionamento e o scrolling.
Volte ao ex5.html e adcione o seguinte código na primeira linha frame src: noresize=”noresize”
scrolling=”yes”
Salve o documento e atualize no navegador. Veja que agora é exibido uma borda entre as duas páginas e
que elas tem a largura de 3 pixels.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,60%" frameborder=”Yes” border=”3”>
<frame src=”ex4.html” name=”acima” noresize=”noresize” scrolling=”yes”>
<frame src=”ex3.html” name=”abaixo”>
</frameset>
</HTML>
O que fizemos agora é dizer para o navegador que o recurso de redimensionamento deve estar
desativado (opção noresize com o valor “noresize” permite redimensionamento, para permitir o
redimensionamento e só não adcionar o noresize )e que o recurso de scrolling deve estar ativado(opção
scrolling com o valor “yes” permite scrolling, para não permitir o scrolling e só usar o valor “no”).
Inserindo texto para navegadores sem suporte a frames.
O recurso de frames permite que sejam criadas paginas dentro da estrutura do frames afim de que sejam exibidas caso o navegador não ofereça suporte, para isso usamos o tag <noframes> antes do tag <body>
Faça as modificações afim de que seu documento esteje como o abaixo.
o seu codigo deve estar parecido com o abaixo.
<HTML>
<head>
<title>Exercício 5</title>
</head>
<frameset rows="40%,60%" frameborder=”Yes” border=”3”>
<frame src=”ex4.html” name=”acima” noresize=”noresize” scrolling=”yes”>
<frame src=”ex3.html” name=”abaixo”>
<body><noframes>[b]Esta pagina usa o recurso de frames, porém seu navegador não suporta este recurso.<BR>
Aconselhamos que atualizasse seu navegador por uma versão mais recente.
</noframes>
</body></HTML>
O que fizemos agora é inserir uma mensagem que será mostrada em um navegador que não ofereça o
suporte a frames, lembrando que neste ponto você pode criar uma pagina completa.
Exercício
Nome:exepratico3.html
Titulo:Exercicio Pratico 3
Texto Centralizado: Aulas de HTML
Pule uma linha
Texto Restante: Crie uma página usando todos os recursos até aqui apresentados.
Crie uma pagina:
Nome:exepratico4.html
Titulo:Exercicio Pratico 4
Texto Centralizado: Aulas de HTML
Pule uma linha
Texto Restante: Crie uma página usando todos os recursos até aqui apresentados.
Crie uma pagina frame:
Nome:exepratico5.html
Titulo:Exercicio Pratico 5
Divisão: 2 divisões verticais (uma com nome esquerda e a outra como direito)
Divisão esquerda: Nesta pagina deve aparecer o exepratico3.html
Divisão direito: Nesta pagina deve aparecer o exepratico4.html
Perdeu alguma aula?, Quer saber qual é a proxima? Visite o Indice
Clique aqui
Clique aqui para visitar o site oficial
Clique aqui
Clique aqui para visitar o site oficial
