LIFTOFF A BEBIDA ENERGÉTICA
Iniciação ao HTML - continuação		 NULLSH.com Jornal de Noticias Interessantes!
5. Multimédia: Som e Imagem (continuação) Além de imagens, também existe a possibilidade de colocar um pequeno reprodutor de som na página. Embora muita gente ache a musica de fundo algo de gosto duvidoso, desta maneira será possível parar a música, através de um pequeno controle tipo aparelhagem.

O aspecto será o seguinte: Image: http://forum.inforpascoa.pt//imgforum/midi.JPG Nota-se que foram utilizados dois ‘tags’ para fazer a mesma coisa. Porquê? Os dois browsers mais utilizados, o Internet Explorer da Microsoft e o Navigator da Netscape têm certas diferenças na sua interpretação do HTML. Por isso, por vezes, é necessário incluir dois comandos diferentes para uma mesma função, visto que cada um destes comandos se destina a um dos browsers. O ‘tag’ tem no parâmetro SRC a localização do ficheiro de som a tocar. No exemplo trata-se de um ficheiro .MID, mas pode perfeitamente ser um som .WAV ou .AU. De forma similar, o ‘tag’ tem em SRC o ficheiro a tocar. Mas este ‘tag’ é substancialmente diferente. é um ‘tag’ poderosíssimo que tem como função a inserção de ‘plug-ins’ multimédia, que além de som também podem ser programas em Java, filmes ou mesmo visores de mundos em realidade virtual. Os parâmetros de são específicos conforme o conteúdo e é um domínio já bastante avançado da criação de páginas. 6. Estrutura usando tabelas Na criação de páginas em HTML, as tabelas são algo que serve para muito mais que para a criação de tabelas propriamente ditas. Na verdade, é rara a página bem construída que não as utilize para melhor controlar a localização do texto, imagens e outros elementos de uma página. Vamos seguir atentamente a criação de uma página com tabelas, visto que este é um dos processos onde os iniciados ao HTML encontram mais dificuldades. Página com uma tabela simples Isto parece um pouco óbvio. O ‘tag’
inicia a nossa tabela. O parâmetro ALIGN define a localização da tabela na página (neste caso ficará centrada), e BORDER define a largura da borda. Agora, este ‘tag’ parece bem mais estranho. significa Table Row, e indica que vamos introduzir uma linha na nossa tabela. Parece lógico, dado que normalmente as tabelas se definem por linhas e colunas. No entanto… Poder-se-ia dizer que o
Uma célula Duas células diz respeito à divisão em colunas, duas neste caso. No entanto, isto é pouco exacto visto que, como vamos ver mais à frente, um não corresponde necessariamente a uma coluna da nossa tabela. Na verdade este ‘tag’ apenas divide a linha actual em várias células. Mas atenção! Se quisermos apenas uma célula, teremos sempre que utilizar na mesma um ! Outra coisa a notar, o parâmetro ALIGN deste ‘tag’ diz respeito ao alinhamento por defeito do texto contido na célula.
Fechamos todos os ‘tags’ abertos e assim concluímos a nossa tabela: Image: http://forum.inforpascoa.pt//imgforum/html01.jpg vamos ver agora mais alguns exemplos de como utilizar tabelas. Primeiramente vamos ver como se utiliza uma tabela para fazer uma página de entrada num site, com uma imagem centrada no ecrã. Site de Eduardo Sousa – Carregue na imagem para entrar
Clique para entrar
O resultado será este: Image: http://forum.inforpascoa.pt//imgforum/html02.jpg 6. Estrutura usando tabelas (continuação) Como vimos, é obrigatório respeitar sempre a hierarquia
e o facto de esta tabela ter apenas uma célula não dispensa nenhum destes ‘tags’. Começando por , WIDTH e HEIGHT definem o tamanho da tabela. Neste caso foi fornecido um valor em percentagem, relativo ao tamanho do ecrã. Assim conseguimos criar uma tabela que ocupa a totalidade do ecrã. Caso estivesse escrito
, o valor seria interpretado em termos absolutos, em pixeis, e tendo em conta que a maioria das pessoas têm o seu ecrã com 800 pixeis de largura, o resultado da tabela seria bem diferente. Cabe a cada um julgar as situações em que devem ser utilizadas percentagens ou valores em pixeis Em e para várias linhas, como se pode ver no resultado. Analisemos então o HTML que inserimos. Começamos por introduzir um novo parâmetro em
, surgem ALIGN e VALIGN. Se o primeiro é um parâmetro que surge em muitos ‘tags’ e diz respeito ao alinhamento horizontal (pode conter "CENTER", "LEFT" ou "RIGHT"), VALIGN é um parâmetro que nos surge apenas no ‘tag’ , e diz respeito ao alinhamento vertical. Pode por isso conter os valores "MIDDLE", "TOP" ou "BOTTOM", respectivamente para o centro, em cima ou em baixo. Finalmente, vamos analisar uma tabela complexa:
1
2 3 4
5
Para melhor compreender esta estrutura é conveniente vermos o resultado final: Image: http://forum.inforpascoa.pt//imgforum/html03.jpg É por isto que não se pode associar os ‘tags’
com linhas e colunas. Se bem que exista alguma verdade nessa associação, podemos, de facto, ter apenas um para várias colunas, e um
. Através de BGCOLOR conseguimos definir, tal como fizemos para a o corpo da página, a cor de fundo da tabela. Este parâmetro também pode ser utilizado em e em seguinte a ser aberto vá ocupar o espaço que ficou debaixo da célula 4. 7. Estrutura avançadas: "Frames" Quem já navegou um pouco pela Internet com certeza já encontrou páginas em que, por exemplo, existe um menu estático no lado esquerdo do ecrã e o conteúdo do lado direito é que vai mudando. Para tal é utilizado um processo mais complexo no qual visualizamos ao mesmo tempo no ecrã mais que uma página HTML. Para isso usa-se aquilo que iremos chamar de sistema de ‘frames’. O princípio é simples. Temos uma página que nos indica a posição na qual as outras páginas serão colocadas. No exemplo referido de um menu do lado esquerdo, ateríamos, por exemplo uma página principal.htm que nos diz para exibir a página menu.html no lado esquerdo e a página conteudo.htm no lado direito. Vamos agora ver como criar uma página com três ‘frames’, uma do lado esquerdo, e do lado direito um cabeçalho e o corpo, como no seguinte esquema: Image: http://forum.inforpascoa.pt//imgforum/html04.JPG Página com Frames <BODY BGCOLOR="#FFFFFF"> Esta página usa frames, mas o seu browser não as consegue visualizar. </BODY> Vejamos: esta página é algo diferente daquilo que aprendemos até agora. Isto porque aquilo que vemos no ecrã não é esta página, mas sim aquelas que esta refere. Para definir frames, utiliza-se o ‘tag’ . Como não se trata propriamente do corpo da página, este ‘tag’ define uma área após a área , mas não contido dentro do ‘tag’ . Ao utilizar o parâmetro COLS, divide a página em colunas, neste caso definidas por "160,*". Isto significa que são criadas duas, uma com 160 pixeis de largura e outra que ocupa o resto do espaço disponível no ecrã. As medidas das frames podem ser fornecidas em pixeis, em percentagem do espaço disponível ou por um asterisco, que significa ‘o resto’. Estas colunas são definidas da esquerda para a direita. Temos também BORDER e FRAMESPACING, que definem a borda e o espaçamento entre frames. Dentro de , podemos então definir a frame propriamente dita ou subdividi-la pela ordem em que foram criadas as colunas. Temos então inserido o ‘tag’ , que se refere à primeira coluna (de 160 pixeis). SRC define qual o ficheiro HTML a ser exibido nessa frame, NAME, muito importante, indica qual o nome da frame, para que as links possam lá recair (veremos isto mais à frente). NORESIZE indica que a frame não pode ser redimensionada com o rato, e FRAMEBORDER, mais uma vez, a borda da frame. Utiliza-se e mais uma vez por uma questão de compatibilidade entre o Internet Explorer e o Netscape Navigator. SCROLLING pode ser definido com "YES" ou "NO" para obrigar a barra de scroll a estar sempre visível ou escondida. Image: http://forum.inforpascoa.pt//imgforum/html05.jpg A segunda coluna que definimos é então ocupada por um novo , este agora que divide essa área em duas linhas, utilizando ROWS. De forma semelhante a COLS, ROWS divide a área a que diz respeito em linhas, lidas de cima para baixo. No final temos ainda uma estranha área. Esta, que dentro de si contém uma área<BODY>, destina-se a alojar o conteúdo do corpo da página visível nos browsers antigos (anteriores ao Netscape 2.0), que não suportam frames. Como é que fazemos com que as links ‘caiam’ sobre uma das frames que criamos? Aí entra o parâmetro NAME de <FRAME>. Através do nome que definimos, podemos usar o seguinte código, por exemplo no ficheiro ‘esquerda.htm’: <A HREF="link.htm?phpMyAdmin=06b4c987e3363b7a87386a55aa3772e4" TARGET="conteudo">Link</A> Através de TARGET podemos definir o ‘alvo’ de uma link, que terá o nome que atribuímos à frame desejada. Podemos ainda utilizar TARGET="_blank", que abre a link numa nova janela, e TARGET="_ top", que abre a link no topo de toda a hierarquia de frames no ecrã, apagando as frames existentes. Quando não é atribuído um TARGET, as links abrem por defeito na própria frame onde existem.<br /><br /><div align="right">in forum.ipweb.pt</div> <br/> <center><a href="http://www.ipjornal.com" title="Pagina Principal do IPJornal.com"><img src="http://www.ipjornal.com/img/pagina-principal-ipjornal.jpg" alt="Pagina Principal do IPJornal.com" border="0"></A> <script type="text/javascript"><!-- google_ad_client = "pub-8721871481314574"; google_ad_width = 336; google_ad_height = 280; google_ad_format = "336x280_as"; google_ad_type = "text_image"; google_ad_channel = ""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "0089DA"; google_color_text = "44443A"; google_color_url = "9C0B0E"; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </center> </td> </tr> <tr> <td height="40" valign="middle" class="Verdana Grey TC S"><a rel="nofollow" href="http://www.ipjornal.com/redirect/http://forum.inforpascoa.pt/html/1096-iniciacao-ao-html-continuacao.html" title="Iniciação ao HTML - continuação" class="M Grey">http://forum.inforpascoa.pt/html/1096-in<br>iciacao-ao-html-continuacao.html</a></td> </tr> <tr> <td height="20"><div align="center"><span class="newsDate Verdana XS Red">Publicado em 2007/09/26 na categoria <a href="/rss/forum-inforpascoa.php" class="Red">Fórum Inforpáscoa</a></span></div></td> </tr> <tr> <td><div align="center"><div class="newsTitle Verdana M B Blue">Notícias semelhantes:</div><div class="newsTitle Verdana M B Grey"><a href="382481_como-resolver-algoritmo--.html" class="Grey"><h3>Como resolver algoritmo ?</h3></a></div><div class="newsTitle Verdana M B Grey"><a href="382480_need-for-speed--qual-a-melhor-versao-.html" class="Grey"><h3>Need for speed, qual a melhor versão?</h3></a></div><div class="newsTitle Verdana M B Grey"> <a rel="nofollow" href="http://classificadosponto.com/138-0-1-8.html" target="_blank"><img border="0" src="http://dinheirooportunidade.com/idevaffiliate/banners/banner_classificados_468.gif" width="468" height="60"></a> </div><div class="newsTitle Verdana M B Grey"><a href="382479_alguem-joga-mu---preciso-saber-de-uma-dicas---.html" class="Grey"><h3>Alguém joga MU?? preciso saber de uma dicas!!?</h3></a></div><div class="newsTitle Verdana M B Grey"><a href="382478_preciso-do-livro--a-arte-de-fazer-acontecer--onde-posso-encontra-lo-para-download-.html" class="Grey"><h3>Preciso do livro: A arte de fazer acontecer. Onde posso encontrá-lo para download?</h3></a></div><div class="newsTitle Verdana M B Grey"><a href="382477_canon-a590is-ou-a720is-.html" class="Grey"><h3>Canon A590is Ou A720is?</h3></a></div><div class="newsTitle Verdana M B Grey"><a href="382476_ola-pessoal-estou-com-um-problema-serio-eu-quero-acessar-a-area-de-trabalho-remota-sem-ter.html" class="Grey"><h3>ola pessoal estou com um problema serio eu quero acessar a area de <a href="http://action.metaffiliation.com/suivi.php?mclic=S413914BCB6143" rel="nofollow" target="_blank" class="appsLink">trabalho</a> remota sem ter</h3></a></div><div class="newsTitle Verdana M B Grey"><a href="382475_tibia-small-stones---.html" class="Grey"><h3>Tibia small stones !?</h3></a></div><div class="newsTitle Verdana M B Grey"><a href="382474_placa-de-rede-do-meu-pc--.html" class="Grey"><h3>placa de rede do meu pc ?</h3></a></div><div class="newsTitle Verdana M B Grey"><a href="382473_comandos-de-radio-no-cs-1-6-.html" class="Grey"><h3>comandos de radio no cs 1.6?</h3></a></div><div class="newsTitle Verdana M B Grey"><a href="382472_para-que-serve-o-programa--outlook-spress-no-computador-.html" class="Grey"><h3>Para que serve o programa (outlook spress)no computador?</h3></a></div><div class="newsTitle Verdana M B Grey"><a href="382471_onde-baixo-o-jogo-diablo-2-completo---sem-torrent--.html" class="Grey"><h3>onde baixo o jogo diablo 2 completo? (sem torrent)?</h3></a></div></div></td> </tr> <tr> <td height="30"><div align="center"><a href="http://www.ipjornal.com" title="Voltar ao IPJornal" class="M Red B">Voltar ao IPJornal</a></div></td> </tr> <tr> <td>&nbsp;</td> </tr> </table> </div> <div id="footer"> <div class="BarGrey"></div> <div class="Verdana S LGrey TC" style="line-height:40px;">Copyright 2007 Grupo Inforpáscoa. Powered by: <a href="http://www.sector9.pt" class="LGrey" target="_blank">Sector9</a>.</div> </div> <!-- End Body Code --> </body> </html>
para definir a cor de fundo de uma determinada linha ou célula. Depois introduzimos . Este parâmetro define o número de colunas que uma determinada célula ‘percorre’. Assim, como acontece na nossa tabela, se tivermos uma única célula com três células por baixo, teremos que percorrer três colunas. No entanto, teremos sempre que considerar como número de colunas na nossa tabela o maior numero possível, por exemplo, se a célula 5 estivesse dividida em duas colunas, o parâmetro COLSPAN da célula 1 teria que ter um valor igual a 4. Semelhante temos também ROWSPAN, que se aplica a linhas. Vemos este parâmetro aplicado nas células 2 e 3, o que faz com que o