06 html links e frames
Transferir como PPTX, PDF0 gostou1,027 visualizações
O documento explica como criar links e molduras em HTML usando as tags <a> e <frame>. A tag <a> é usada para criar hiperlinks com os atributos href, target e name. A tag <frame> define cada documento HTML em molduras separadas com os atributos cols, rows e noresize.
![ATag Âncora e o Atributo Nome
O atributo nome é usado para criar uma âncora nomeada. Quando usamos âncoras nomeadas podemos criar
vínculos que saltam diretamente para uma seção específica em uma página, em vez de deixar o usuário rolar [a
janela (scroll)] por todo parte para encontrar o que ele/ela está procurando.
Abaixo está a sintaxe de uma âncora nomeada:
<a name="rótulo">Texto a ser exibido</a>
O atributo nome é usado para criar uma âncora nomeada. O nome da âncora pode ser qualquer texto que você
quiser usar.
A linha abaixo define uma âncora nomeada:
<a name="dicas">Seção de Dicas Úteis</a>](https://image.slidesharecdn.com/06html-linkseframes-151004171851-lva1-app6892/85/06-html-links-e-frames-10-320.jpg)
06 html links e frames
- 1. PáginasWeb com: HTML, CSS e JavaScript Profª. Marlene da Silva Maximiano de Oliveira & Profª. Alessandra Aparecida da Silva
- 2. Links • Links quer dizer vínculos. • A HTML usa um hiperlink para vincular-se a outro documento na Web.
- 3. Exemplo – Link para um site <html> <body> <p> <a href="http://www.microsoft.com/"> Este texto</a> é um vínculo para uma página na Internet. </p> </body> </html>
- 4. Exemplo – Para uma página dentro do mesmo site <html> <body> <p> <a href=“link1.html"> Este texto</a> é um vínculo (link) para uma página no mesmo site. </p> </body> </html>
- 5. Exemplo – Imagem como link <html> <body> <p> Você também pode usar uma imagem como um vínculo: <a href="link1.html"> <img border="0" src="buttonnext.gif" > </a> </p> </body> </html>
- 6. ATag Âncora e o Atributo Href A HTML usa a tag <a> (âncora) para criar um vínculo (link) com outro documento. Uma âncora pode apontar para qualquer recurso naWeb: uma página em HTML, uma imagem, um arquivo de som, um filme, etc. Sintaxe para criar uma âncora: <a href="url">Texto a ser exibido</a>
- 7. O atributo href A tag <a> é usada para criar uma âncora de onde vincular, o atributo href é usado para onde endereçar o documento, e as palavras entre as tags de abertura e fechamento da âncora serão exibidas como um hiperlink. Esta âncora define um vínculo para o uol: A linha acima será mostrada assim em um navegador: <a href="http://www.uol.com.br/">Visite o uol!</a>
- 8. A Atributo Alvo (Target) • Com o atributo alvo, você pode definir onde o documento vinculado será aberto. • A linha abaixo abrirá o documento em uma nova janela do navegador: • <a href="http://www.uol.com.br/" target="_blank">Visite o uol!</a>
- 9. OutrosTipos de alvo muito usados em Frame (veremos em outra aula) _Blank - Faz um link ser aberto em outra janela, guia ou navegador (dependendo da versão do seu navegador) _Self - O link inicia ali mesmo, sobre aquela página. _Parent - Ele abre sobre outros links ou sobre a janela que estamos trabalhando. _Top - Essa tag indica que independente de onde o link se originou, ele abrirá em uma tela inteira. Se o seu blog ou página utilizar "frames", ele carregará o conteúdo usando toda a tela, e não o espaço do frame
- 10. ATag Âncora e o Atributo Nome O atributo nome é usado para criar uma âncora nomeada. Quando usamos âncoras nomeadas podemos criar vínculos que saltam diretamente para uma seção específica em uma página, em vez de deixar o usuário rolar [a janela (scroll)] por todo parte para encontrar o que ele/ela está procurando. Abaixo está a sintaxe de uma âncora nomeada: <a name="rótulo">Texto a ser exibido</a> O atributo nome é usado para criar uma âncora nomeada. O nome da âncora pode ser qualquer texto que você quiser usar. A linha abaixo define uma âncora nomeada: <a name="dicas">Seção de Dicas Úteis</a>
- 11. ATag Âncora e o Atributo Nome Você deve observar que a âncora nomeada não é exibida de maneira especial. Para vincular diretamente a uma seção "dicas", adicione um sinal de # e o nome da âncora no final de uma URL, como esta: <a href="http://www.w3schools.com/html_links.asp#tips"> Saltar para a Seção de Dicas Úteis</a>
- 12. ATag Âncora e o Atributo Nome Um hipervínculo para a Seção de Dicas Úteis de DENTRO do arquivo "html_links.asp" seria assim: <a href="#dicas">Saltar para a Seção de Dicas Úteis</a>
- 13. Criar um vínculo de correio (mailto) • Este exemplo demonstra como fazer um vínculo para uma mensagem de correio (somente irá funcionar de você tiver o correio instalado). • Exemplo à seguir:
- 14. Vínculo de correio - mailto <html> <body> <p> Este é um vínculo de correio (mail): <a href="mailto:[email protected]? subject=Hello%20again"> Enviar Correio</a> </p> <p> <b>Observação:</b> Os espaços entre as palavras devem ser substituídos por %20 para <b>assegurar</b> que o navegador exiba o seu texto apropriadamente. </p> </body> </html>
- 15. Frames ou Molduras Com molduras, você pode exibir mais de um documento HTML na mesma janela do navegador.Cada documento HTML é chamado de moldura, e cada moldura é independente das outras. As desvantagens de usar molduras são: O desenvolvedorWeb deve vigiar mais documentos HTML. É difícil imprimir a página inteira.
- 16. ATag Moldura (Frame) A tag <frame> define qual documento HTML colocar em cada moldura. Imagine o seguinte exemplo: um conjunto de frames com duas colunas. A primeira coluna é configurada em 25% da largura da janela do navegador. A segunda coluna é configurada em 75% da largura da janela do navegador. O documento HTML "frame_a.htm" é colocado na primeira coluna, e o documento HTML "frame_b.htm" é colocado na segunda coluna: <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
- 17. Não permitir o redimensionamento das bordas. • Se uma moldura tem bordas visíveis, o usuário pode redimensiona-las arrastando a borda. Para evitar que um usuário faça isso, você pode adicionar noresize="noresize" à tag <frame>.
- 18. Exemplo 1 – MoldurasVerticais <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </html> Página index.html
- 19. Criando as páginas que compõe a moldura • Faça o mesmo para as outras páginas: • frame_b.html • frame_c.html Página frame_a.html <html> <head> <title></title> </head> <body> Esta é a página "frame_a.html" </body> </html>
- 20. Como aparecerá no navegador Obs. Salve as 4 páginas HTML na mesma pasta.
- 21. Molduras Horizontais <html> <frameset rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>
- 22. Sem bordas<html> <frameset border=0 rows="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>
- 23. Exemplo <html> <frameset rows="10%,90%"> <frame noresize="noresize" src="frame_a.html"> <frameset cols="15%,85%"> <frame noresize="noresize" src="frame_b.html"> <frame noresize="noresize" src="frame_c.html"> </frameset> </frameset> </html>
- 24. Moldura com links • Criar uma página chamada principal.html <html> <head> <title></title> </head> <body> <a href ="frame_a.html" target ="showframe">Moldura a</a><br> <a href ="frame_b.html" target ="showframe">Moldura b</a><br> <a href ="frame_c.html" target ="showframe">Moldura c</a> </body> </html>
- 25. Crie a página index.html <html> <frameset cols="120,*"> <frame src="principal.html"> <frame src="frame_a.html" name="showframe"> </frameset> </html>