Âncora. Imagens.
Propaganda
APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ MÓDULO 4: Hipertexto: âncoras <a>. Âncoras • • ____ Fazem diferenciação entre maiúsculas e minúsculas; <a></a> - o texto entre estas tags se transformará no link real que aparecerá na tela e será destacado; o href – (hypertext reference) – para especificar o nome ou a URL do arquivo para o qual esse link aponta; <a href="http://www.gomeshp.com"> Gomes' Home Page </a> <a href="mailto:[email protected]"> Gomes' E-Mail </a> o title – para apresentar um texto informativo (tooltip) quando o mouse for passado sobre o link, fornecendo dicas sobre a finalidade do link; <a href="http://www.gomeshp.com" title="Página Principal"> Gomes' Home Page </a> o name – deve ser único em todo o documento; usado para definir o nome de uma região em uma página; Em arquivos diferentes • <a name="parte2">Exemplo</a> - supondo que esta âncora está no arquivo T2.html; • <a href="T2.html#parte2">Parte 2</a> - supondo que esta âncora está no arquivo T1.html; assim, o navegador carrega a página T2.html e, depois, desce até a âncora chamada parte2; No mesmo arquivo • <a name="exemplo1">Exemplo 01</a> - supondo que esta âncora está no arquivo Math01.html; • <a href="#exemplo1">Exemplo</a> - supondo que esta âncora está, também no arquivo Math01.html; assim, o navegador desce até a âncora chamada exemplo1; www.gomeshp.com ________________________________________________ 1 APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ Exemplo 1º. Crie o arquivo html abaixo e salve com o nome xhtml_04a.html. <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CARD&Aacute;PIO</title> </head> <body> <h1 align="center">MENU</h1> <h4>COUVERT</h4> <h4>ENTRADAS</h4> <h4><a href="xhtml_04b.html" title="Apresenta os ingredientes utilizados em cada um dos pratos abaixo">PRATOS PRINCIPAIS</a></h4> <p><font face="Arial" size="2" color="red"><b><i> FILET DE TRUTAS<br /> FILET MIGNON<br /> AVES<br /> MASSAS FRESCAS<br /> RISOTO<br /></i></b></font></p> <h4><a href="#BEBIDAS">BEBIDAS</a></h4> <h4><a href="xhtml_04c.html">SOBREMESAS</a></h4> <hr size="8" /> <h3 align="center"><a name="BEBIDAS">BEBIDAS</a></h3> <b>&Aacute;gua 600 ml<br /> Cerveja em lata<br /> Cerveja em garrafa<br /> Chopp<br /> Chopp preto<br /> Refrigerante em lata<br /> Refrigerante 2 litros<br /> Sucos em caixinha<br /> Sucos em garrafa<br /> Sucos naturais<br /> </body> </html> ____ www.gomeshp.com ________________________________________________ 2 APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ 2º. Crie o arquivo html abaixo e salve com o nome xhtml_04b.html. <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>PRATOS PRINCIPAIS</title> </head> <body> <h3 align="center">PRATOS PRINCIPAIS</h3> <b>FILET DE TRUTAS CURRY</b> – molho curry ingl&ecirc;s ou indiano, abacaxi, banana, vinho branco e creme de leite.<br /> <b>FILET MIGNON ROQUEFORT</b> – queijo tipo roquefort de origem alem&atilde; ou dinamarquesa, conhaque e creme de leite.<br /> <b>AVES SUPR&Ecirc;ME E PORCINI</b> – fil&eacute; de frango marinado em lim&atilde;o ao molho de funghi porcini e laranja.<br /> <b>MASSAS FRESCAS LA PASSION RONDELI</b> – de ricota gratinado sobre molho de framboesas org&acirc;nicas e cream cheese regado ao molho suave de queijo roquefort.<br /> <b>RISOTO PIAMONTESE</b> – arroz arb&oacute;reo, cogumelos, parmes&atilde;o e creme de leite.<br /> </body> </html> 3º. Crie o arquivo html abaixo e salve com o nome xhtml_04c.html. <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>SOBREMESAS</title> </head> <body> <h3 align="center">SOBREMESAS</h3> <b>BANANAS</b> - flambadas com sorvete de creme e castanhas de caj&uacute;.<br /> <b>CREPE</b> – de morangos com gel&eacute;ia de rosas e gergelim.<br /> <b>MONTECCHIO & CAPULETO</b> – profiterole com sorvete de queijo e calda quente de goiaba.<br/> <b>PETIT GATEAU</b>.<br /> <b>TORTA FRANCESA</b> – com ma&ccedil;&atilde;s e molho anglaise.<br /> </body> </html> 4º. Abra a janela do Internet Explorer e redimensione-a de forma que ocupe ¼ da área de trabalho. Execute o arquivo xhtml_04a.html e veja os resultados. ____ www.gomeshp.com ________________________________________________ 3 APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ Figura após execução do arquivo xhtml_04a.html Figura após clicar no link PRATOS PRINCIPAIS ____ www.gomeshp.com ________________________________________________ 4 APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ Figura após clicar no link BEBIDAS Figura após clicar no link SOBREMESAS ____ www.gomeshp.com ________________________________________________ 5 APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ 4ª Lista de Exercícios 1. Utilizando os recursos aprendidos, fazer um arquivo html que contenha seu currículo, seguindo os itens abaixo: 1º. Arquivo: Página inicial 2º. Arquivo: Dados pessoais Documentos, endereços, e-mail, site, telefones. 3º. Arquivo: Histórico Escolar Ano, serie, nome da escola. Ginásio, 1º. Grau, 2º. Grau, 3º. Grau. 4º. Arquivo: Estágios / Empregos Cargo, período, local, descrição das atividades. ____ www.gomeshp.com ________________________________________________ 6 APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ Imagens: <img>. Atributos: src, alt, align, border, height e width. Imagens • <img o o o • src o o • alt o /> precisa aparecer dentro de um elemento de parágrafo ou de cabeçalho; quanto menor a imagem, mais rápido o browser vai baixá-la1; define inclusão de uma imagem que podem ter como extensão .gif, .png2, .jpg, ou .jpeg.3; <img src="figura.gif" /> - atributo scr permite a inclusão de uma imagem, definindo o nome e o caminho da imagem; <img src="http://www.gomeshp.com/figuras/imagem.jpg" /> - indica que o arquivo imagem.jpg encontra-se em www.gomeshp.com no diretório figuras; <img src="lua.gif" alt="Lua cheia" /> - atributo alt permite: A) definir uma descrição da imagem, que é muito útil quando a imagem não é carregada pelo browser; B) definir um texto explicativo sobre a função da imagem; ou seja, um tooltip (dica) é apresentado quando o usuário passa o mouse sobre a imagem; De acordo com o padrão W3C, o atributo alt é obrigatório. • align o top – alinha a imagem com a linha superior do texto; o bottom - alinha a imagem com a linha inferior do texto; o middle - alinha a imagem exatamente no centro do texto; o left - alinha a imagem à esquerda do texto; e é o alinhamento padrão; o right - alinha a imagem à direita do texto; • border o <img src="lua.gif" border="3" /> - define a largura da borda em 3 pixels; • Criando um link a partir de uma imagem: o <a href="http://www.ab.com"><img src="lua.gif" border="2" /></a> • height / width o <img src="lua.gif" height="100" width="90" /> - define a altura da imagem em 100 pixels e largura em 90 pixels; • Especificando uma imagem de fundo para a página: o <body background="/imagens/fundo.gif"> De acordo com o padrão W3C, o atributo background está desaprovado. 1 Imagens .gif são relativamente pequenas. Faça a opção por imagens .jpg ou .png somente quando se tratar de fotos ou imagens que necessitem de alta resolução de cores. 2 Não há garantia de suporte por navegadores mais antigos, apenas pelos mais recentes. 3 Se a extensão está em maiúsculas ou minúsculas não será importante quando estiver fazendo o teste em seu sistema local, mas o será quando você mover os seus arquivos para o servidor. Por isso, se puder, use letras minúsculas. ____ www.gomeshp.com ________________________________________________ 7 APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ Exemplos <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>1&ordm; Exemplo</title> </head> <body> <p><font face="Courier" size="3" color="blue"><b>Amor, de quem o <img src="mundo.gif" alt="Mundo" align="top" border="4" height="60" width="60" /> come&ccedil;ou,<br /> Obteve o segredo do <img src="sol.gif" alt="Sol" align="middle" height="60" width="60" />.<br /> O amor e somente o amor pode dizer enquanto <img src="estrelas.gif" alt="Estrelas" align="botton" height="60" width="60" /> aos milhares estavam espalhadas.<br /> Pois cada <img src="atomo.gif" alt="Átomo" border="2" height="60" width="60" /> sabe de si pr&oacute;prio.<br /><br /> <cite>Robert Bridges.</cite></b></font></p> </body> </html> ____ www.gomeshp.com ________________________________________________ 8 APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>2&ordm; Exemplo</title> </head> <body> <img src="virus.gif" align="middle" height="100" width="100" /> Brain, tido como o primeiro vírus de computador, completou 20 anos.<br /> <img src="disquetes.gif" align="right" height="80" width="80"/> A praga, que se alojava no setor de boot dos discos, usava disquetes para se espalhar de micro a micro, uma prática absolutamente arcaica diante das técnicas atuais de distribuição em massa pela internet, usando técnicas furtivas e peças requintadas de programação. <br clear="right" /> <img src="symantec.gif" align="left" border="3" height="80" width="80" /> <img src="msoffice.gif" align="right" border="3" height="80" width="80" /> Os vírus de boot deixaram de ser produzidos à medida que as pessoas pararam de usar disquetes. Mesmo assim, Brain abriu caminho para uma linhagem de vírus, worms, trojans e todo tipo de malware, que já chega a 72.010 vírus (dados de 19 de janeiro, segundo a Symantec). A partir de 1995, uma nova categoria de vírus surgiu, mantendo-se popular até 1999: os chamados vírus de macro. Eles se valiam de vulnerabilidades dos programas do Microsoft Office para funcionar e se disseminar por meio dos arquivos criados por esses programas. <br /> </body> </html> ____ www.gomeshp.com ________________________________________________ 9 APOSTILA DE XHTML ___________________________________________ Profa. Gilene Borges Gomes ___ <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>3&ordm; Exemplo</title> </head> <body background="rosas.gif"> <b><p align="center"><font face="Times" size="10" color="blue"> Origem das rosas</font><br /> O nome vem do latim rosa e do grego rhodon. As rosas estão entre as flores mais antigas a serem cultivadas. A primeira parece ter crescido nos jardins asiáticos há 5000 anos. Na sua forma selvagem a flor é ainda mais antiga; fósseis dessas rosas datam de há 35 milhões de anos. </p> <p align="justify"><a href="http://1001cartasdeamor.com.br"> <img src="rosav.gif" align="right" alt="1001 Cartas de Amor" /></a> A rosa vermelha, a mais desejada e admirada ntre todas as outras, simboliza o amor; porém quando as rosas vermelhas vierem acompanhadas por rosas brancas, o ramalhete assume o significado de unidade. Além de amor, estas flores vermelhas também podem traduzir mensagens de respeito e coragem. Quando apresentam tons bem escuros querem se referir a uma beleza inconsciente.</p></b> </body> </html> 5ª Lista de Exercícios 1. Testar os exemplos apresentados. 2. Criar um arquivo .html que apresente um texto e imagens, utilizando as tags apresentadas nesta aula. ____ www.gomeshp.com ________________________________________________ 10
