Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André...
Transcript of Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André...
![Page 1: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/1.jpg)
Linguagem HTML:
Frames
Prof. André Constantino da Silva
Prof. Rodolfo Francisco de Oliveira
IAM
1 semestre de 2012
15 de maio de 2012
![Page 2: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/2.jpg)
Aula de Hoje
• Divisão da janela em partes para exibir várias
páginas HTML
• Copiar a pasta p:\iam para o seu computador
– Não alterar os arquivos no p: !!
![Page 3: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/3.jpg)
O que vocês já sabem fazer?
![Page 4: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/4.jpg)
Cada “retângulo” é um arquivo .HTML
diferente, unidos por um arquivo .HTML
![Page 5: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/5.jpg)
![Page 6: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/6.jpg)
<html>
<head>
<title>IAM - Introdução a Multimídia</title>
</head>
<body style="background:black">
<h1 align="center" style="color:white">IAM
- Introdução a Multimídia</h1>
</body>
</html>
Vamos chamar de
iamtitulo.html
![Page 7: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/7.jpg)
![Page 8: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/8.jpg)
<html>
<head>
<title>IAM - Introdução a Multimídia</title>
</head>
<body style="background:#AAFFAA">
<h2 align="center">1 semestre 2012</h2>
<h3>Professores:</h3>
<a href="andreconstantino/index.html">Prof. André
Constantino da Silva</a>
<br>Prof. Rodolfo Oliveira
<h3>Alunos:</h3>
Athos Fernando
<br>Carolina Hoffman
<br>Eduardo Henrique Gomes de Lima
...
<br>Wesley da Silva Santos
</body>
</html> Vamos chamar de
pessoas.html
![Page 9: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/9.jpg)
![Page 10: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/10.jpg)
<html>
<head>
<title>IAM - Introdução a Multimídia</title>
</head>
<body>
<h1 align="center">IAM - Introdução a Multimídia</h1>
Esta é a página da disciplina de IAM do curso de Informática do IFSP Campus Hortolândia.
<p>A esquerda você encontra uma lista com o nome dos professores e dos alunos, com links para suas páginas pessoais.
</body>
</html>Vamos chamar de
principal.html
![Page 11: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/11.jpg)
Mas como eu junto?
![Page 12: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/12.jpg)
Mas como eu junto?
Através das tags
<frameset> e <frame>
![Page 13: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/13.jpg)
A Tag <frameset>
• Define um conjunto de molduras, ou seja,
como dividir a janela em molduras
• Você deve definir um conjunto de linhas ou
colunas
– Usar atributo rows ou cols, cujos valores indicam
a percentagem da área da tela que será utilizada
![Page 14: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/14.jpg)
A Tag <frame>
• Define qual página html deverá aparecer em cada parte (moldura)
• Deve conter uma tag para cada moldura criada
• Atributos:
– name: identificador da moldura
– src: link da página que deve ser exibida naquela moldura
![Page 15: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/15.jpg)
Exemplo 1
![Page 16: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/16.jpg)
Exemplo 1
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset cols="15%,85%">
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
</frameset>
</html>
![Page 17: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/17.jpg)
Exemplo 1
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset cols="15%,85%">
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
</frameset>
</html>
O arquivo .html que
cria os frames não
contém a tag
<body>!
![Page 18: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/18.jpg)
Exemplo 1
Cada retângulo é
um frame
![Page 19: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/19.jpg)
Exemplo 1 O conjunto é um
frameset
![Page 20: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/20.jpg)
Exemplo 2
![Page 21: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/21.jpg)
Exemplo 2
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset cols="60%,40%">
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
</frameset>
</html>
![Page 22: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/22.jpg)
Exemplo 3
![Page 23: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/23.jpg)
Exemplo 3
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset cols=“33%,33%,33%">
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
<frame name =“moldura3” src=""/>
</frameset>
</html>
![Page 24: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/24.jpg)
Exemplo 4
![Page 25: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/25.jpg)
Exemplo 4
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="50%,50%">
<frame name=“moldura1” src=""/>
<frame name=“moldura2” src=""/>
</frameset>
</html>
![Page 26: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/26.jpg)
Exemplo 5
![Page 27: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/27.jpg)
Exemplo 5
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="20%,80%">
<frame name =“moldura1” src=""/>
<frame name =“moldura2” src=""/>
</frameset>
</html>
![Page 28: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/28.jpg)
![Page 29: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/29.jpg)
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="33%,33%,33%" cols="33%,33%,33%">
<frame name ="moldura1" src=""/>
<frame name ="moldura2" src=""/>
<frame name ="moldura3" src=""/>
<frame name ="moldura4" src=""/>
<frame name ="moldura5" src=""/>
<frame name ="moldura6" src=""/>
<frame name ="moldura7" src=""/>
<frame name ="moldura8" src=""/>
<frame name ="moldura9" src=""/> </frameset>
</html>
![Page 30: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/30.jpg)
E para nossa página inicial, como
podemos fazer?
• Salvar como index.html
15%
85%
30% 70%
moldura1
moldura3moldura2
![Page 31: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/31.jpg)
Resposta
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name =“moldura1” src=""/>
<frameset cols="30%,70%">
<frame name =“moldura2” src=""/>
<frame name =“moldura3” src=""/>
</frameset>
</frameset>
</html>
Dois conjuntos de
frameset
![Page 32: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/32.jpg)
Precisamos preencher...
iamtitulo.html
pessoas.html
principal.html
![Page 33: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/33.jpg)
Precisamos preencher...
iamtitulo.html
![Page 34: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/34.jpg)
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name=“moldura1” src="iamtitulo.html"/>
<frameset cols="30%,70%">
<frame name=“moldura2” src=""/>
<frame name=“moldura3” src=""/>
</frameset>
</frameset>
</html>
![Page 35: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/35.jpg)
Precisamos preencher...
pessoas.html
![Page 36: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/36.jpg)
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name=“moldura1” src="iamtitulo.html"/>
<frameset cols="30%,70%">
<frame name=“moldura2” src=“pessoas.html"/>
<frame name=“moldura3” src=""/>
</frameset>
</frameset>
</html>
![Page 37: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/37.jpg)
Precisamos preencher...
principal.html
![Page 38: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/38.jpg)
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name=“moldura1” src="iamtitulo.html"/>
<frameset cols="30%,70%">
<frame name=“moldura2” src=“pessoas.html"/>
<frame name=“moldura3” src="principal.html” />
</frameset>
</frameset>
</html>
![Page 39: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/39.jpg)
Preenchido!
![Page 40: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/40.jpg)
Mas e se
eu clicar
aqui?
![Page 41: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/41.jpg)
![Page 42: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/42.jpg)
moldura2 moldura3
![Page 43: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/43.jpg)
<html>
<head>
<title>IAM - Introdução a Multimídia</title>
</head>
<body style="background:#AAFFAA">
<h2 align="center">1 semestre 2012</h2>
<h3>Professores:</h3>
<a href="andreconstantino/index.html“ target=“moldura3”>Prof. André Constantino
da Silva</a>
<br>Prof. Rodolfo Oliveira
<h3>Alunos:</h3>
Athos Fernando
<br>Carolina Hoffman
<br>Eduardo Henrique Gomes de Lima
...
<br>Wesley da Silva Santos
</body>
</html>
Informamos na tag <a>
referente ao link o
nome do frame que a
página deve ser
visualizada
![Page 44: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/44.jpg)
E se eu
clicar
aqui?
![Page 45: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/45.jpg)
![Page 46: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/46.jpg)
E se eu quiser que o
link apareça em uma
nova página, e não
dentro do frame?
![Page 47: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/47.jpg)
<html>
<head>
<title>IAM - Introdução a Multimídia</title>
</head>
<body>
<h1 align="center">IAM - Introdução a Multimídia</h1>
Esta é a página da disciplina de IAM do curso de Informática do <a href="http://www.ifsp.edu.br" target="_blank">IFSP</a> Campus Hortolândia.
<p>A esquerda você encontra uma lista com o nome dos professores e dos alunos, com links para suas páginas pessoais.
</body>
</html>
![Page 48: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/48.jpg)
Atributos da tag <frameset>
• cols:– Função?
– Valores?
• rows:– Função?
– Valores?
• frameborder: – Define se o navegador deve ou não apresentar borda do
frame
– Valores possíveis: yes , no
![Page 49: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/49.jpg)
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%">
<frame name=“moldura1” src="iamtitulo.html“ frameborder=“no”/>
<frameset cols="30%,70%">
<frame name=“moldura2” src=“pessoas.html"/>
<frame name=“moldura3” src="principal.html “/>
</frameset>
</frameset>
</html>
![Page 50: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/50.jpg)
![Page 51: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/51.jpg)
Atributos da tag <frame>
• src:
– Função?
– Valores?
• scrolling:
– Define se o navegador deve ou não apresentar a barra de rolagem para visualizar toda a página dentro do frame
– Valores possíveis: yes , no, auto
![Page 52: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/52.jpg)
Atributos da tag <frame>
• src:
– Função?
– Valores?
• scrolling:
– Define se o navegador deve ou não apresentar a barra de rolagem para visualizar toda a página dentro do frame
– Valores possíveis: yes , no, auto
Vamos testar!
![Page 53: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/53.jpg)
yes
![Page 54: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/54.jpg)
no
![Page 55: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/55.jpg)
auto
![Page 56: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/56.jpg)
Navegador sem suporte a frames
• Navegadores antigos ou de alguns dispositivos
como celulares não suportam frames
• O que fazer?
– Podemos deixar uma mensagem ou página HTML
sem frame através da tag <noframe>
![Page 57: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/57.jpg)
<html>
<head>
<title>Aprendendo a Usar Frames</title>
</head>
<frameset rows="15%,85%" frameborder="no">
<frame name="moldura1" src="iamtitulo.html"/>
<frameset cols="30%,70%" >
<frame name="moldura2" src="pessoas.html" />
<frame name="moldura3" src="principal.html"/>
</frameset>
<noframe>
<body>
<h2>Bem-vindo à página de IAM!</h2>
<p> Caso deseje ver a lista de professores e alunos, clique <a href=“pessoas.html”>aqui .</a>
</body>
</noframe>
</frameset>
</html>
![Page 58: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/58.jpg)
A tag <noframe>
• Exibe conteúdo nos navegadores que não
suportam frames
• Possui a tag <body> e pode ter qualquer tag
HTML que já apredemos, inclusive a tag <a>
![Page 59: Linguagem HTML: Frames - WordPress.com · 2013. 9. 2. · Linguagem HTML: Frames Prof. André Constantino da Silva Prof. Rodolfo Francisco de Oliveira IAM 1 semestre de 2012 15 de](https://reader035.fdocument.pub/reader035/viewer/2022063019/5fde26211229a83f640bd6d2/html5/thumbnails/59.jpg)
Considerações
• Frames são úteis para apresentar várias
páginas htmls de uma vez
• Cuidado! Nem sempre a navegação é fácil,
além de problemas para a impressão e a
marcação dos documentos interiores aos
frames nos bookmarks
• Alternativa para os frames são as tabelas