Manual Completo HTML

11/10/2010
Manual de HTML - Manual completo
Manual de HTML
Manual de: C riar Web, manuais e recursos para desenvolvimento web Verso on-line: http://www.criarweb.com/manuais/2
Prlogo ao manual de HTML

Bem- vindos ao manual de HTML de Criarweb. Atravs de todos estes captulos vamos desc obrir a linguagem utilizada para a criao de pginas web: o Hyper Text Markup Language, mais c onhecido c omo HTML. princ pio, o fato de falar de uma linguagem informtica pode fazer com que algum se desanime, mas no para se assustar, pois o HTML no deixa de ser mais que uma forma um tanto pec uliar de dar formatos aos textos e imagens que pretendemos ver por meio de um navegador. Antes de come armos este manual, o qual faremos de uma forma direta e prtica, lhe recomendamos fervorosamente a leitura prvia de nosso manual Desde zero. A partir deste guia, voc aprender os conceitos bsic os necessrios para a c ria o de um web site. E tambm lhe permitir acessar este manual j c om alguns c onhecimentos de base impresc indveis sobre HTML, alm de lhe deixar bem c laro o que seu c onhecimento c ontribui em relao ao simples uso de editores HTML. As pessoas que enfocamos neste manual so todas aquelas que c om conhecimentos mnimos de informtic a, desejam fazer mundialmente pblic o uma mensagem, uma idia ou uma informao, usando para isso o meio mais prtico, ec onmic o e atual: a Internet. O que se necessita c omo base para se obter um bom aprendizado (alm de ler o manual Desde zero) : Saber escrever c om um tec lado Saber manusear um mouse Ter vontade de aprender O que se obter depois de haver passado por estes captulos: Capacidade para criar e public ar seu prprio site web com um mnimo de qualidade Conhec imentos de todo tipo sobre as tecnologias e ferramentas empregadas no mbito da Rede Possivelmente um interesse ou um gostar que pode se c onverter em paixo, e terminar em alguns c asos, sendo um vc io ou um trabalho. Vale lembrar que estamos a sua inteira disposio para resover todo o tipo de dvidas referentes a este manual. E para entrar em contato conosco to fc il c omo clic ar sobre o e- mail do autor do artigo situado ao p da pgina. Passamos ento, sem mais prembulos, a ver o que se trata o HTML...
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com
Introduo ao HTML
HTML a linguagem com que se esc revem as pginas web. As pginas web podem ser vistas pelo usurio mediante um tipo de aplic a o c hamada navegador (browser). Podemos dizer portanto,
www.criarweb.com/manuais/2/print.php 1/83
11/10/2010
que o HTML a linguagem usada pelos navegadores para mostrar as pginas webs ao usurio, sendo hoje em dia a interfac e mais extensa na rede. Esta linguagem nos permite aglutinar textos, imagens e udios, e combin- los a nosso gosto. Ademais, e aqui onde est a sua vantagem em relao aos livros e revistas, o HTML nos permite a introduo de referncias a outras pginas por meio dos links hipertextos. O HTML se c riou a princ pio com objetivos de divulgao. Porm, no se pensou que a web c hegaria a ser uma rea de cio c om c arter multimdia, de modo que, o HTML se c riou sem dar respostas a todos os possveis usos que lhe dariam posteriormente e ao todo c oletivo de gente que o utilizariam no futuro. Entretanto, frente a este defic iente planejamento, com o tempo, foram se inc orporando modific aes, as quais so os padres do HTML. Numerosos padres j se apresentaram. O HTML 4.01 foi o ltimo padro feito at o ms de abril de 2004. Esta evolu o to anrquica do HTML, trouxe toda uma srie de inc ovenientes e defic inc ias que tiveram que ser superadas c om a introdu o de outras tecnologias ac essrias c apazes de organizar, optimizar e automatizar o funcionamento das webs. Exemplos que podem soar c omo c onhecidos so as CSS, JavaScript ou outros. Veremos mais adiante em que c onsistem algumas delas. Alguns dos problemas que ac ompanham ao HTML a diversidade de navegadores presentes no merc ado, os quais no so capazes de interpretar o mesmo cdigo de uma maneira unificada. Isto obriga ao webmaster a, uma vez c riada sua pgina, comprovar que esta pode ser lida satisfatoriamente por todos os navegadores, ou pelo menos, pelos mais utilizados. Alm do navegador nec essrio para ver os resultados de nosso trabalho, necessitamos evidentemente outra ferramenta c apaz de criar a pgina em si. Um arquivo HTML (uma pgina) no mais do que um texto. por isso que para programar em HTML necessitamos um editor de textos. rec omendvel usar o bloc o de notas que vem no Windows, ou outro editor de textos simples. No entanto, h de ter c uidado com alguns editores mais c omplexos c omo Wordpad ou Mic rosoftWord, pois c oloc am seu prprio cdigo especial ao salvar as pginas e c omo o HTML unicamente texto plano, poderemos ter problemas com isso. Existem outros tipos de editores especfic os para a criao de pginas web, os quais oferecem muitas facilidades que nos permitem aumentar nossa produtividade. Porm, aconselhvel princ pio utilizar uma ferramenta, o mais simples possvel para poder prestar a mxima aten o ao nosso cdigo e familiarizarmos o antes possvel c om ele. Logo mais adiante, ganharemos tempo ao utilizarmos os editores mais versteis. Par ter mais c laro todo o tema de editores e os tipos que existem, visite os artigos: Editores de HTML Bloc o de notas Tambm se pode ac essar a descri es de editores mais c omplexos que o Bloco de notas, porm mais potentes c omo o Homesite. importante ter claro tudo isso visto que em fun o de seus objetivos, pode ser que mais do que aprender HTML, resulte mais interessante aprender o uso de uma aplic ao para a criao de pginas. Sendo assim, uma pgina um arquivo onde est contido o cdigo HTML em forma de texto. Estes arquivos tem extenso .html ou .htm ( indiferente qual deles utilizar). De modo que quando programarmos em HTML, o faremos com um editor de textos e salvaremos nossos trabalhos c om extenso .html, por exemplo, minhapagina.html. Conselho: Utilize sempre a mesma extenso em seus arquivos HTML. Isso evitar que voc se c onfunda ao esc rever os nomes dos seus arquivos umas vezes com .html e outras com .htm. E se voc trabalha c om uma equipe em um projeto, ainda mais importante que todos estejam de ac ordo c om a mesma extenso.
11/10/2010
Sintaxes do HTML
O HTML uma linguagem que baseia sua sintaxe em um elemento de base que c hamamos etiqueta (tag). A etiqueta apresenta frequentemente duas partes: Uma abertura de forma geral <etiqueta> Um fec hamento do tipo </etiqueta> Tudo que estiver includo no interior desta etiqueta sofrer as modificaes que c arac terizam a esta etiqueta. Como por exemplo: As etiquetas <b> e </b> definem um texto em negrito. Se em nosso doc umento HTML esc revemos uma frase c om o seguinte c digo:
<b>Isto est em negrito</b>
O resultado ser: Isto est em negrito As etiquetas <p> e </p> definem um pargrafo. Se em nosso documento HTML escrevssemos:
<p>Ol, estamos no pargrafo 1</p> <p>Agora mudamos de pargrafo</p>
O resultado seria: Ol, estamos no pargrafo 1 Agora mudamos de pargrafo
Partes de um documento HTML Ademais de tudo isso, um doc umento HTML deve estar delimitado pela etiqueta <html> e </html>. Dentro deste documento, podemos ainda distinguir duas partes principais: O c abe alho, delimitado por <head> e </head> onde colocaremos etiquetas de ndole informativo c omo por exemplo o ttulo de nossa pgina. O c orpo, delimitado pelas etiquetas <body> e </body>, que ser onde coloc aremos nosso texto e imagens delimitados por sua vez por outras etiquetas como as que vimos anteriormente. O resultado um documento c om a seguinte estrutura:
<html> <head>
Etiquetas e contedos do c abealho Dados que no aparecem em nossa pgina mas que so importantes para c atalog-la: Ttulo, palavras-c haves, etc
</head>
www.criarweb.com/manuais/2/print.php
3/83
11/10/2010
<body>
Etiquetas e contedo do c orpo Parte do documento que ser mostrada pelo navegador: Textos e imagens
</body> </html>
As maisculas ou minsculas so indiferentes ao escrever as etiquetas As etiquetas podem ser escritas c om qualquer tipo de c ombina o entre maisc ulas e minsc ulas. Ou seja, <HTML> ou <HtMl> so a mesma etiqueta. Entretanto, ac onselhvel ac ostumar- se a esc rev-las em minscula j que outras tecnologias que podem c onviver c om nosso HTML (XML por exemplo) no so to permissivas e nunca est mal ter bons costumes desde o princ pio para evitar falhos triviais no futuro.
Sua primeira pgina

Podemos j com estes c onhec imentos, e mais algum outro, criar nossa primeira pgina. Para isso, abra seu editor de textos e, copie e c ole o seguinte texto em um novo documento:
<html> <head> <title>C ozinha Para Todos</title> </head> <body> <p><b>Bem-vindo,</b></p> <p>Voc est na pgina<b>C omida para todos</b>.</p> <p>Aqui voc aprender receitas fceis e deliciosas.</p> </body> </html>
Agora salve este arquivo c om extenso .html ou .htm em seu disco rgido. Para isso, ac essamos no menu "Arquivo" e selecionamos a op o "Salvar como". Na janela escolhemos o diretrio onde desejamos salv-lo e c oloc aremos um nome para ele, como por exemplo: minha_pgina.html.
Conselho: Utilize nomes em seus arquivos que tenham algumas normas bsicas para poupar alguma confuso ou desgosto. Nosso conselho que no utilize acentos, nem espaos, nem outros caracteres raros. Tambm lhe ajudar escrever sempre as letras em minsculas. Isto no quer dizer que se deve fazer nomes de arquivos curtos, melhor faz-los descritivos para que se possa lembrar o que h dentro. Algum caractere como o trao "-" ou o trao baixo "_" lhe pode ajudar a separar as palavras. Por exemplo: quem_somos.html
Com o doc umento HTML c riado, podemos ver o resultado obtido atravs de um navegador. Chegado a este ponto, conveniente, insistir no fato de que nem todos os navegadores so idntic os. Infelizmente, os resultados de nosso c digo podem mudar de um para outro, sendo por isso ac onselhvel visualizar a pgina em vrios navegadores. Geralmente usam-se Internet Explorer e Netsc ape como refernc ias j que so os mais extensos. Na verdade, no momento em que estas linhas so esc ritas, o Internet Explorer monopoliza a maioria imensa de usurios (mais ou menos 90%) e o Netscape est relegado a um segundo plano. Isto no quer dizer que devemos deix-lo de lado j que o 10% de visitas que este pode
11/10/2010
nos proporcionar, pode resultar muito importante para ns. Por outro lado, parec e que j se tornou pblic a a inten o do Netscape de desviar um pouc o seus negc ios para outros rumos e abandonar esta c hamada "luta de navegadores" na qual estava rec ebendo a pior parte. Ento, voltando ao tema, uma vez criado o arquivo .html ou .htm, podemos visualizar o resultado de nosso trabalho abrindo a pgina criada com um navegador. Para isso, dependendo do navegador a forma de fazer ser diferente. Se estamos usando o Explorer, temos de ir barra de menu, selec ionar "Arquivo" e em seguida "Abrir". Uma janela ir se abrir. Clicamos sobre o boto "Examinar" e acessamos uma janela a partir da qual poderemos nos mover pelo interior do nosso disco rgido at enc ontrar o arquivo que desejamos abrir. A c oisa no mais difc il com o Netsc ape. Neste caso, temos de ir tambm barra de menu princ ipal e selecionarmos File e logo, Open File. A mesma janela de busca nos permitir examinar o c ontedo de nosso PC at dar com o arquivo proc urado.
Nota: Tambm se pode abrir o arquivo acessando o diretrio onde ele est salvo. Nele se pode encontrar seu arquivo HTML e ver que possui como cone o logotipo de Netscape ou o do Internet Explorer. Para abr-lo simplesmente fazemos um clique duplo sobre ele.
Uma vez aberto o arquivo, j poder ver sua primeira pgina web. Algo simples mas que j um c ome o. E que em pouc o tempo, j ver c omo ser c apaz de melhorar sensivelmente. Observe a parte superior esquerda da janela do navegador e poder comprovar a presen a do texto delimitado pela etiqueta <title>. Esta uma das funes desta etiqueta, c ujo princ ipal inc ubnc ia o de servir de referncia nos motores de busca como Altavista ou Yahoo.
Por outro lado, os elementos que c oloc amos entre a etiqueta <body> e </body> se podem ver no espao reservado para o c orpo da pgina. Podemos ver a pgina do exemplo em func ionamento aqui. Se agora dermos um clique no boto direito do mouse sobre a pgina e selec ionarmos "Ver cdigo fonte" (ou View page source), veremos c omo que numa janela ac essria aparec e o c digo de nossa pgina. Este recurso de extrema importncia j que nos permite ver o tipo de tc nicas empregadas por outros para a confec o de suas pginas. Com tudo isso assimilado j estamos em condi es de aprofundarmos um pouco mais na desc rio de algumas das etiquetas mais usadas do HTML.
Possvel problema: Ao utilizar o Bloco de Notas no Windows em algumas ocasies, mesmo lhe dizendo que um arquivo .html, o documento se salva como se fosse um
5/83
11/10/2010

texto e no uma pgina web. O que est acontecendo que o Bloco de Notas tem prdeterminado salvar seus arquivos com extenso .txt e por isso, na realidade o que ele est salvando no disco rgido minha_pagina.html.txt. Para conseguir ter o controle das extenses no Bloco de Notas e no Windows em geral podemos acessar ao "Meu computador" e no menu de "Ver", selecionar "Opes de pasta". Na janela que aparece clicamos na opo "Ver" e nos permite desabilitar uma caixa de seleo que pe como "Ocultar extenses para os tipo de arquivos conhecidos". (assim se faz no Win98, mas pode variar um pouco em outras verses do Windows) C om isso conseguiremos ver sempre a extenso do arquivo com o qual estamos trabalhando e fazer com que o Bloco de Notas atenda o que estamos lhe solicitando quando gravamos com outra extenso que no seja .txt.
Formato de pargrafos em HTML

Nos c aptulos anteriores apresentamos a ttulo de exemplo, algumas etiquetas que permitem dar formato ao nosso texto. Neste c aptulo veremos c om mais detalhe, as etiquetas mais amplamente utilizadas e exemplific aremos algumas delas posteriormente. Formatar um texto passa por tarefas to evidentes como definir os pargrafos, justific-los, introduzir marc adores, numeraes, ou pr em negrito, itlico, etc . Vimos que para definir os pargrafos utilizamos a etiqueta <p> que introduz um salto e deixa uma linha em branc o antes de c ontinuar c om o resto do doc umento. Podemos tambm utilizar a etiqueta <br>, da qual no existe seu fec hamento c orrespondente (</br>), para realizar um simples enter, c om o que no deixamos uma linha em branco, e sim, somente mudamos de linha.
Nota: Existem outras etiquetas que no tm seu correspondente de fechamento, como <img> para as imagens, que veremos mais adiante. Isto ocorre porque um salto de linha ou uma imagem no comeam e acabam mais adiante, simplesmente s tm presena em um lugar pontual.
Podemos c omprovar que mudar de linha em nosso doc umento HTML sem introduzir algumas dessas ou de outras etiquetas no implica em absoluto uma mudana de linha na pgina visualizada. Na realidade o navegador introduzir o texto e no mudar de linha a no ser que esta chegue a seu fim ou se o especifiquemos c om a etiqueta c orrespondente. Os pargrafos delimitados por etiquetas <p> podem ser facilmente justific ados esquerda, ao c entro ou direita, especific ando tal justific a o no interior da etiqueta por meio de um atributo align. Um atributo no mais do que um parmetro includo no interior da etiqueta que ajuda a definir o func ionamento da etiqueta de uma forma mais pessoal. Veremos ao longo deste manual uma quantidade de atributos muito teis para todo tipo de etiquetas. Ento, se desejssemos introduzir um texto alinhado esquerda esc reveramos:
<p align="left">Texto alinhado esquerda</p>
O resultado seria: Texto alinhado esquerda
Para uma justific a o ao c entro:

11/10/2010 justific a o ao c entro: Para uma
<p align="center">Texto alinhado ao centro</p>
Que seria: Texto alinhado ao c entro
Para justificar direita:

<p align="right">Texto alinhado direita</p>
Cujo efeito seria: Texto alinhado direita
Como se v, em c ada c aso o atributo align toma determinados valores que so esc ritos entre aspas. Em algumas oc asies nec essitamos espec ificar alguns atributos para o func ionamento c orreto da etiqueta. Em outros casos, o prprio navegador toma um valor definido por padro. Para o c aso de align, o valor padro left.
Nota: Os atributos tm seus valores indicados entre aspas ("), mas se no os indicamos entre aspas, tambm funcionar na maioria dos casos. Entretanto, aconselhvel que ponhamos sempre as aspas para acostumarmos a utiliz-las, por dar homogeneidade aos nossos cdigos e para evitar erros futuros em sistemas mais meticulosos.
O atributo align no exclusivo da etiqueta <p>. Outras etiquetas muitos c omuns, que veremos mais adiante, entre as quais se introduzem texto ou imagens, c ostumam fazer uso deste atributo de forma habitual. Imaginemos um texto relativamente longo onde todos os pargrafos esto alinhados esquerda (por exemplo). Uma forma de simplificar nosso cdigo e de evitar introduzir continuamente o atributo align sobre c ada uma de nossas etiquetas utilizando a etiqueta <div>. Esta etiqueta por si s no serve para nada. Tem que estar ac ompanhada do atributo align e o que nos permite alinhar qualquer elemento (pargrafo ou imagem) da maneira que ns desejarmos. Assim, o c digo: <p align="left">paragrafo1</p>
<p align="left">pargrafo2</p> <p align="left">paragrafo3</p>
equivalente a:
<div align="left"> <p>paragrafo1</p> <p>paragrafo2</p> <p>paragrafo3</p> </div>
Como vimos, a etiqueta <div> marc a divises nas quais definimos um mesmo tipo de alinhado. Exemplo prtico: Para praticar um pouc o o que ac abamos de ver, vamos propor um exercc io que se pode resolver no seu computador. Simplesmente queremos construir uma pgina que tenha, por esta ordem:
7/83
11/10/2010
2 pargrafos c entralizados 3 pargrafos direita Um salto triplo de linha 1 pargrafo alinhado esquerda No vamos escrever nesta oc asio o cdigo fonte do exerc cio. Podemos v- lo em func ionamento em nosso navegador e na janela podemos obter o c digo fonte selec ionando no menu Exibir a opo Cdigo fonte. Cabealhos Existem outras etiquetas para definir pargrafos espec iais, formatados como ttulos. So os c abe alhos ou Header em ingls. Como dissemos, so etiquetas que formatam o texto c omo um ttulo, para o qual atribuem um tamanho maior de letra e c oloc am o texto em negrito. Existem vrios tipos de c abe alhos que se diferenciam no tamanho da letra que utilizam. A etiqueta em c onc reto a <h1>, para os c abe alhos maiores, <h2> para os de segundo nvel e assim, at <h6> que o cabe alho menor. Os cabe alhos implic am tambm uma separao em pargrafos, portanto, tudo o que for escrito dentro de <h1> e </h1> (ou qualquer outro cabe alho) ser c oloc ado em um pargrafo independente. Podemos ver como se apresentam alguns c abe alhos a seguir:
<h1>C abealho de nvel 1</h1>
Ser visto dessa maneira na pgina:
Cabealho de nvel 1
Os cabe alhos, c omo outras etiquetas de html, suportam o atributo align. Vejamos um exemplo de c abe alho de nvel 2 alinhado ao c entro:
<h2 align="center">C abealho de nvel 2</h2>
Ser visto dessa maneira na pgina:
Cabealho de nvel 2
Outro exercc io interessante c onstruir uma pgina web que contenha todos os c abe alhos possveis. Pode-se ver a seguir:
<html> <head> <title>Todos os cabealhos</title> </head> <body> <h1>C abealho <h2>C abealho <h3>C abealho <h4>C abealho <h5>C abealho <h6>C abealho de de de de de de nvel nvel nvel nvel nvel nvel 1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>
8/83
11/10/2010
</body> </html>
Pode-se ver o exerc cio em uma pgina a parte.

Conselho: No devemos utilizar as etiquetas do cabealho para formatar o texto, ou seja, se queremos colocar um tipo de letra maior e em negrito, devemos utilizar as etiquetas que existem para isso (que veremos em seguida). Os cabealhos so para colocar ttulos em pginas web e o navegador o responsvel de formatar o texto de maneira que parea um ttulo. C ada navegador ento, pode formatar o texto ao seu gosto contanto que parea um ttulo.
Formatando o texto
Alm de tudo relativo organiza o dos pargrafos, um dos aspec tos primordiais da formata o de um texto, o da prpria letra. muito c omum e prtic o, apresentar o texto ressaltado em negrito, itlic o e outros. Paralelamente, o uso de ndic es e subndic es vital para a public a o de textos c ientfic os. Tudo isso e muito mais, possvel por meio do HTML a partir de uma srie de etiquetas entre as quais vamos destac ar algumas. Negrito Podemos esc rever o texto em negrito o inc luindo dentro das etiquetas <b> e </b> (bold). Esta mesma tarefa desempenhada por <strong> e </strong> sendo ambas equivalentes. Ns nos inc linamos pelas primeiras por uma simples razo de esforo. Esc revendo um c digo deste tipo:
<b>Texto em negrito</b>
Obteremos este resultado: Texto em negrito

Nota: Qual a diferena entre <b> e <strong>? Apesar das duas etiquetas fazerem o mesmo efeito, h uma peculiaridade que as fazem distintas. A etiqueta <b> indica negrito, enquanto que a etiqueta <strong> indica que se deve escrever ressaltado. Os navegadores interpretam o HTML segundo seu critrio, por isso que se podem ver as pginas de distintas maneiras em uns browsers e outros. A etiqueta <h1> quer dizer "cabealho de nvel 1", o navegador o responsvel de formatar o texto de maneira que parea um cabealho de primeiro nvel. Na prtica, os cabealhos do Internet Explorer e do Netscape so muito parecidos (tamanho de letra grande e em negrito), mas outro navegador poderia colocar os cabealhos sublinhados se lhe parecesse oportuno.
Itlico Tambm neste c aso existem duas possibilidades, uma c urta: <i> e </i> (italic) e outra um pouc o mais longa: <em> e </em>. Neste manual, e na maioria das pginas que se v por a, normal encontrar c om a primeira forma que sem dvida mais simples para esc rever e para se lembrar. Abaixo, um exemplo de texto em itlico:
<i>Texto em itlico</i>
Que d o seguinte efeito: Texto em itlico

11/10/2010 Texto em itlico
Sublinhado O HTML nos prope tambm para o sublinhado as etiquetas: <u> e </u> (underline). Entretanto o uso do sublinhado deve ser usado c om muita prec au o visto que os links hipertextos vo, a no ser que se indique o c ontrrio, sublinhados com o que podemos c onfundir o leitor e afast-lo do verdadeiro interesse de nosso texto. Subscrito e sobrescrito Este tipo de formato de extrema utilidade para textos c ientficos. As etiquetas empregadas so: <sup> e </sup> para os sobresc ritos <sub> e </sub> para os subsc ritos Temos aqui um exemplo: A <sup>13</sup>C C <sub>3</sub>H<sub>4</sub>C INOS um heterociclo alergeno enriquecido O resultado seria: A CC3H4CINOS um heteroc ic lo alergeno enriquec ido. Combinar etiquetas Todas estas etiquetas, inc luindo as que j vimos e as que ainda vamos ver, podem ser c ombinadas estando umas dentro das outras de forma que conseguimos resultados diferentes. Assim, podemos sem nenhum problema criar um texto em negrito e em itlico colocando uma etiqueta dentro da outra:
<b>Isto s est em negrito<i>e isto em negrito e itlico</i></b>
Isto daria: Isto s est em negrito e isto em negrito e itlico

Conselho: Para unir etiquetas HTML, faa corretamente. Referimo-nos a que se voc abre uma etiqueta dentro de outra mais principal, antes de fechar a etiqueta principal feche as etiquetas que voc tiver aberto dentro dela. Devemos evitar cdigos como o seguinte: <b>Isto est em negrito e <i>itlico</b></i> A favor de cdigos com etiquetas corretamente colocadas: <b>Isto est em negrito e<i>itlico</i></b> Isto muito aconselhvel, ainda que os navegadores entendam bem as etiquetas mal colocadas, por duas razes: 1. Sistemas como XML no so to permissivos com estes erros e pode que no futuro nossas pginas no funcionem corretamente. 2. Leva muito tempo de processamento para os navegadores resolverem este tipo de erro, inclusive mais do que construir a prpria pgina, por isso devemos evitar-lhes que sofram por uma m codificao.
Cor, tamanho e tipo de letra

Apesar de que por razes de homogeneidade e simplicidade de c digo estes tipos de formatos so
11/10/2010
c ontrolados atualmente por folhas de estilo c ascata (das quais j teremos tempo de falar), existe uma forma clssica e direta de definir c or, tamanho e tipo de letra de um determinado texto. Isto se faz a partir da etiqueta <font> e seu fec hamento c orrespondente. Dentro desta etiqueta devemos espec ificar os atributos c orrespondentes a c ada um destes parmetros que desejamos definir. A seguir c omentamos os atributos princ ipais desta etiqueta: Atributo face Define o tipo de letra. Este atributo interpretado por verses do Netscape a partir da 3 e de MSIE 3 ou superiores. Outros navegadores as ignoram c ompletamente e mostram o texto com a fonte que utilizam. Deve- se ter c uidado com este atributo j que cada usurio, dependendo da plataforma que utilize, pode no dispor dos mesmos tipos de letra que ns c om o que, se ns esc olhemos um tipo do que no dispe, o navegador se ver for ado a mostrar o texto com a fonte que utiliza por padro (que c ostuma ser Times New Roman). Para evitar isso, dentro do atributo c ostuma-se selec ionar vrios tipos de letras separados por vrgulas. Neste c aso, o navegador c omprovar que dispe do primeiro tipo numerado e se no for assim, passar para o segundo e assim suc essivamente at enc ontrar um tipo que possua ou ento, at ac abar a lista e c oloc ar a fonte padro. Vejamos um exemplo: <font fac e="Comic SansMS,arial,verdana">Este texto tem outra tipografia</font> Que se visualizaria assim em uma pgina web: Este texto tem outra tipografia
Nota: Aqui temos um exemplo de atributo cujo valor deve estar limitado entre aspas ("). Havamos dito que as aspas eram opcionais nos atributos, entretanto isto no assim sempre. Se o valor do atributo contm espaos, como o caso de: face="C omic Sans MS,arial,verdana" devemos colocar as aspas para limit-lo. Em caso de no ter aspas face=C omic Sans MS,arial, verdana se entenderia que face=C omic, mas no se levaria em conta tudo o que segue, porque o HTML no o associaria ao valor atributo. Neste caso o HTML pensaria que as seguintes palavras (depois do espao) so outros atributos, mas como no os conhece como atributos simplesmente iria ignor-los.
Atributo size Define o tamanho da letra. Este tamanho pode ser absoluto ou relativo. Se falarmos em trminos absolutos, existem 7 nveis de tamanhos distintos numerados de 1 a 7 por ordem cresc ente. Esc olheremos portanto um valor size="1" para a menor letra ou size="7" para a maior. <font size=4>Este texto maior</font> Que se visualizaria assim em uma pgina web:
Este texto maior

Podemos tambm modificar o tamanho de nossa letra em relao ao do texto mostrado anteriormente definindo o nmero de nveis que queremos subir ou desc er nesta esc ala de tamanhos por meio do signo + ou - . Desse modo, se definimos nosso atributo c omo size="+1" o que queremos dizer que aumentamos um nvel o tamanho da letra. Se estvamos esc revendo previamente em 3, passaremos automatic amente a 4.
11/10/2010
Os tamanhos reais que vermos na tela dependero da definio e do tamanho da fonte esc olhido pelo usurio no navegador. Este tamanho de fonte pode ser definido no Explorer indo ao menu superior, Exibir/Tamanho da fonte. No Netscape escolheremos View/Text Size. Esta flexibilidade pode ac abar sendo embaraosa para ns em mais de uma oc asio, j que em muitos casos desejaremos que o tamanho do texto permane a c onstante para que este c aiba em um determinado espa o. Veremos em seu momento que esta pr- fixa o do tamanho pode ser realizada pelas folhas de estilo em casc ata. Atributo cor A c or do texto pode ser definida atravs do atributo cor. Cada cor por sua vez definida por um nmero hexadec imal que est composto por trs partes. Cada uma destas partes representa a c ontribui o do vermelho, verde e azul c or em questo. Por outro lado possvel definir de uma maneira imediata algumas das c ores mais freqentemente usadas para as que se c riaram um nome mais memotc nico: Nombre Color Aqua Blac k Blue Fuc hsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow
<font c olor="red">Este texto est em vermelho</font> Que se visualizaria assim em uma pgina web: Este texto est em vermelho Com tudo isso, j somos c apazes de criar um texto formatado de uma forma realmente elaborada. Colocamos ento em prtic a tudo o que aprendemos nestes captulos fazendo um exerc cio c onsistente em uma pgina que tenha as seguintes carac tersticas: Um ttulo com c abe alho de nvel 1, em itlic o e na c or verde oliva. Um segundo ttulo com c abealho de nvel 2, tambm na c or verde oliva. Todo texto da pgina dever apresentar- se c om uma fonte diferente da fonte padro. Por exemplo, "Comic Sans MS" e no c aso de que esta no esteja no sistema, que se coloque a fonte "Arial".
11/10/2010
Pode-se ver uma possvel soluo do exerc c io neste link.

Atributos para pginas

As pginas HTML podem ser c onstrudas c om uma variedade de atributos que lhe podem dar um aspecto pgina muito personalizado. Podemos definir atributos c omo a c or de fundo, a c or do texto ou dos links. Estes atributos se definem na etiqueta <body> e, c omo dizamos so gerais a toda a pgina. O melhor para explic ar seu funcionamento v- los um a um. Atributos para fundos Bgcolor: espec ificamos uma cor de fundo para a pgina. No captulo anterior aprendemos a c onstruir qualquer c or, com seu nome ou seu valor RGB. A c or de fundo que podemos atribuir c om bgcolor uma cor plana, ou seja, a mesma para toda a superfc ie do navegador. Background: serve para indicar a c oloc ao de uma imagem como fundo da pgina. Nos c aptulos mais adiante, veremos c omo se inserem imagens c om HTML e os tipos de imagens que se podem utilizar. Exemplo de fundo Vamos c oloc ar esta imagem no fundo da pgina.
A imagem chama-se fundo.jpg e supomos que se enc ontra no mesmo diretrio que a pgina. Neste caso se c oloc aria a seguinte etiqueta <body>
<body background="fondo.jpg">
Pode-se ver o efeito de c oloc ar este fundo em uma pgina a parte.

Conselho: Sempre que colocarmos uma imagem de fundo, devemos tambm pr uma cor de fundo prxima da cor da imagem. Isto se deve, pois ao colocar uma imagem de fundo, temos que colocar uma cor que contraste suficientemente com tal fundo. Se o visitante no pode ver o fundo por qualquer questo (por exemplo, por ter a carga de imagens desabilitada) pode que o texto no contraste o suficiente com a cor de fundo padro da web. Acredito que o melhor a fazer testar com um exemplo. Se a imagem de fundo escura, teremos que colocar um texto claro para que se possa ler. Se o visitante que acessa a pgina no v a imagem de fundo, sair o fundo padro, que geralmente branco, de modo que ao ter um texto de cor clara sobre um fundo branco, no ser possvel ler o texto convenientemente. Ocorre parecido quando se est fazendo o download da pgina. Se ainda no chegou ao nosso sistema a imagem de fundo, veremos o fundo que tivermos selecionado com bgcolor e interessante que seja parecido cor da imagem para que se possa ler o texto enquanto se faz o download da imagem de fundo.
Cor do texto
13/83
11/10/2010
Text: Este atributo serve para atribuir a cor do texto da pgina. Por padro o negro. Ademais da cor do texto, temos trs atributos para atribuir a c or dos links da pgina. J devemos saber que os links devem diferenciar-se do resto do texto da pgina para que os usurios possam identific - los fac ilmente. Para isso, eles c ostumam aparec er sublinhados e com uma c or mais viva que o texto. Os trs atributos so os seguintes: Link: a cor dos links que no foram visitados. Vlink: a cor dos links visitados. A letra "v" vem justamente da palavra visitado. a c or que tero os links que j visitamos. Por padro sua c or roxa. Esta cor dever ser um pouc o menos viva que a c or dos links normais. Alink: a c or dos links ativos. Um link est ativo no prec iso momento em que se c lica. s vezes difc il perc eber quando um link est ativo porque no momento em que se ativa, porque o estamos c licando e nesse c aso, o navegador abandonar a pgina rapidamente e no poderemos ver o link ativo mais que um mnimo instante. Exemplo de cor de texto Vamos ver uma pgina em que a c or de fundo seja preta, e as c ores dos textos e dos links sejam c laros. Colocaremos a c or do texto branc a e os links amarelos, mais ressaltados os que no tenham sido visitados e menos ressaltados os que j tenham sido. Para isso, esc reveramos a etiqueta body assim:
<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="ffffcc" vlink="ffff00">
O efeito pode-se ver em uma pgina a parte. Margens Com outros atributos da etiqueta <body> podem- se atribuir espa os de margens nas pginas, o que muito til para eliminar as margens em branc o que aparec em nos lados, em c ima e embaixo da pgina. Estes atributos so diferentes para o Internet Explorer e para o Netsc ape Navigator, por isso, devemos utiliz-los todos se queremos que todos os navegadores os interpretem perfeitamente. Leftmargin: para a indic ar a margem nos lados da pgina. Vlido para Internet Explorer. Topmargin: para indic ar a margem ac ima e abaixo da pgina. Para Internet Explorer. Marginwidth: a contrapartida de leftmargin para Netsc ape. (margem nos lados) Marginheight: igual ao topmargin, mas para Netsc ape. (margem acima e abaixo) Um exemplo de pgina sem margem a prpria pgina de c riarweb.com que voc est visitando atualmente. (pelo menos na hora de esc rever este artigo). Alm disso, vamos ver outra pgina sem margens, c aso algum nec essite ver o exemplo nestas linhas:
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0 bgcolor="ffffff"> <table width=100% bgcolor=ff6666><tr><td> <h1>Ol amigos</h1> <br> <br> Obrigado por me visitar! </td></tr></table> </body>
Esta pgina tem o fundo branc o e dentro um painel com o fundo vermelho. Na pgina poderemos ver que o painel ocupa o espao na pgina sem deixar lugar para nenhum tipo de margem. Podese ver o exemplo em uma pgina parte.
Informe de Miguel Angel Alvarez - Traduo de JML
14/83
11/10/2010
e-mail: juliana@criarweb.com
Listas I
So realmente notveis as possibilidades que o HTML nos oferec e em questo de tratamento de texto. No se limitam ao que vimos at agora, pois vo ainda mais longe. Vrios exemplos disso so as listas, que servem para numerar e definir elementos, os textos pr-formatados e os c abe alhos ou os ttulos. As listas so utilizadas para citar, numerar e definir objetos. Tambm so utilizadas c orrentemente para deslocar o c ome o da linha para a direita. Podemos distinguir trs tipos de listas: Listas desordenadas Listas ordenadas Listas de defini o Veremos agora detalhadamente uma por uma: Listas desordenadas So delimitadas pelas etiquetas <ul> e </ul> (unordered list). Cada um dos elementos da lista c itado por meio de uma etiqueta <li> (sem fec hamento, ainda que exista nenhum inconveniente em c oloc -lo). Ento, fic a assim:
<p>Pases do mundo</p> <ul> <li>Brasil</li> <li>Espanha</li> <li>Austrlia</li> </ul>
O resultado: Pases do mundo Brasil Espanha Austrlia Podemos definir o tipo de marc ador empregado para cada elemento. Para isso devemos especific -lo por meio do atributo type inc ludo dentro da etiqueta de abertura <ul>, se queremos que o estilo seja vlido para toda a lista, ou dentro da etiqueta <li> se queremos espec ificar um s elemento. A sintaxe do seguinte tipo: <ul type="tipo de marc ador"> E o tipo de marcador pode ser um dos seguintes: Circ le Disc Square
Nota: Em alguns navegadores no funciona a opo de mudar o tipo de marcador e por mais que nos empenhemos, sempre sair a bolinha preta. Em caso de que no funcione, sempre podemos construir a lista mo com o marcador que quisermos, utilizando as tabelas do HTML. Veremos mais adiante como trabalhar com tabelas.
15/83
11/10/2010
Vamos ver um exemplo de lista c om um quadrado ao invs de uma bolinha e, no ltimo elemento, c oloc aremos um c rc ulo. Para isso, vamos c oloc ar o atributo type na etiqueta <ul>, que ir afetar todos os elementos da lista.
<ul type="square"> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li type="circle">Elemento 4</li> </ul>
Que tem como resultado: Elemento Elemento Elemento Elemento 1 2 3 4
Listas II
Continuamos estudando as listas do HTML, que nos possibilita criar estruturas atrativas para apresentar a informao. Listas ordenadas Neste caso, usaremos as etiquetas <ol> (ordered list) e seu fec hamento. Cada elemento ser igualmente prec edido de sua etiqueta <li>. Como exemplo:
<p>Regras de comportamento no trabalho</p> <ol> <li>O chefe sempre tem a razo</li> <li>Em caso de dvida, aplicar a regra 1</li> </ol>
O resultado : Regras de comportamento no trabalho 1. O chefe sempre tem a razo 2. Em caso de dvida aplicar a regra 1 Do mesmo modo das listas desordenadas, as listas ordenadas oferec em a possibilidade de modific ar o estilo. Conc retamente, nos possvel espec ific ar o tipo de numera o empregado esc olhendo entre nmeros (1,2,3...), letras (a,b,c...) e suas maisc ulas (A,B,C...) e nmeros romanos em suas verses maisc ulas (I,II,III...) e minsculas (i,ii,iii...). Para realizar tal seleo temos de utilizar, como para o c aso anterior, o atributo type, o qual ser situado dentro da etiqueta <ol>. Neste caso, os valores que o atributo pode tomar so: 1 Para ordenar por nmeros a Por letras do alfabeto A Por letras maisculas do alfabeto i Ordenao por nmeros romanos em minsculas
11/10/2010
I Ordena o por nmeros romanos em maisc ulas

Nota: Lembramos que em alguns navegadores no funciona a opo de mudar o tipo de marcador.
Pode ser que em algum caso desejemos c omear nossa numera o por um nmero ou letra que no tem porque ser nec essariamente o primeiro de todos. Para resolver esta situa o, podemos utilizar um segundo atributo, start, que ter um nmero c omo valor. Este nmero, que por padro 1, corresponde ao valor a partir do qual c ome amos a definir nossa lista. Para o caso das letras ou dos nmeros romanos, o navegador se encarrega de fazer a tradu o do nmero letra c orrespondente. Propomos um exemplo usando este tipo de atributos:
<p>Ordenamos por nmeros</p> <ol type="1"> <li>Elemento 1</li> <li>Elemento 2</li> </ol> <p>Ordenamos por letras</p> <ol type="a"> <li>Elemento a</li> <li>Elemento b</li> </ol> <p>Ordenamos por nmeros romanos comeando pelo 10</p> <ol type="i" start="10"> <li> Elemento x</li> <li> Elemento xi</li> </ol>
O resultado: Ordenamos por nmeros 1. Elemento 1 2. Elemento 2 Ordenamos por letras a. Elemento a b. Elemento b Ordenamos por nmeros romanos c ome ando pelo 10 x. Elemento x xi. Elemento xi
Listas III
Terminamos o assunto das listas estudando as listas de definio. Veremos tambm a c ombina o de listas. Listas de definio
11/10/2010
Cada elemento apresentado junto c om sua definio. A defini o principal <dl> e </dl> (definition list). As etiquetas do elemento e sua defini o so <dt> (difinition term) e <dd> (definition definition) respec tivamente. Aqui lhe propomos um cdigo que poder clarear este sistema:
<p>Dicionrio da Lngua Portuguesa</p> <dl> <dt>Aougue</dt> <dd>Estabelecimento onde se vendem carnes frescas</dd> <dt>C olheita</dt> <dd>Ato de colher os produtos agrcolas</dd> </dl>
O efeito produzido: Dic ionrio da Lngua Portuguesa A ougue Estabelec imento onde se vendem c arnes frescas Colheita Ato de colher os produtos agrc olas Observe que em c ada linha <dd> est deslocada da direo da esquerda. Este tipo de etiquetas usado muitas vezes c om o propsito de criar textos mais ou menos desloc ados da dire o da esquerda. O c digo:
<dl> <dd>Primeiro nvel de deslocamento <dl> <dd>Segundo nvel de deslocamento <dl> <dd>Terceiro nvel de deslocamento </dl> </dl> </dl>
O resultado: Primeiro nvel de desloc amento Segundo nvel de desloc amento Terc eiro nvel de desloc amento Combinando listas Nada nos impede de utilizar todas estas etiquetas de forma c ombinada c omo vimos em outros c asos. Dessa forma, podemos c onseguir listas mistas c omo, por exemplo:
<p>C idades do mundo</p> <ul> <li>Brasil <ol> <li>Rio de Janeiro <li>Salvador </ol> <li>Espanha <ol> <li>Madrid <li>Barcelona </ol> </ul>
18/83
11/10/2010
Dessa forma criamos uma lista c omo esta: Cidades do mundo Brasil 1. Rio de Janeiro 2. Salvador Espanha 1. Madrid 2. Barcelona
Caracteres especiais
Uma pgina web vista por diferentes pases, que usam conjuntos de carac teres distintos. A linguagem HTML nos oferece um mecanismo pelo qual podemos estar seguros que uma srie de c arac teres raros sero bem vistos em todos os c omputadores do mundo, independentemente de seu jogo de c arac teres. Estes c onjuntos so os c aracteres espec iais. Quando queremos pr um desses c aracteres numa pgina, devemos substitu- lo por seu cdigo. Por exemplo, a letra "" (a minscula ac entuada) se escreve: "" de modo que a palavra pgina seria esc rita numa pgina HTML desse modo: p&aamp;aac ute;gina . Caracteres especiais bsicos Na realidade estes c arac teres se usam em HTML para no c onfundir um incio ou final de etiqueta, umas aspas ou um & c om seu correspondente carac ter. < & < & > " > "
Caracteres especiais do HTML 2.0 &Aac ute; É Í &Oac ute; &Uac ute; á é &iac ute; ó ú Ä Ë Ï Ö À È Ì Ò Ù à è ì ò ù &Acirc ; &Ec irc; &Ic irc; &Oc irc ;
19/83
11/10/2010 Ö
Manual ; &Oc irc de HTML - Manual completo
Ü ä ë ï ö ü Ã Ñ Õ ã ñ õ Ø ø Ð ð ß
&Ucirc ; &ac irc; &ec irc; &icirc ; &oc irc; &uc irc; å Å Ç &cc edil; &Yac ute; &yac ute; ÿ Þ þ Æ æ
Caracteres especiais do HTML 3.2 &frac 14; &frac 12; &frac 34; &c opy; ® ª ² ³ ¹ ¯ &mic ro; ¶ · ° &c edil; ¿ &iexc l; £ ¥ &sec t; &c urren; ¦ « ¬ º &ac ute; ¨ ± »
Outros caracteres especiais × ÷ &c ent; €
20/83
11/10/2010
Links em HTML
At aqui, vimos que uma pgina web um arquivo HTML no qual podemos incluir, entre outras c oisas, textos formatados ao nosso gosto e imagens que veremos mais adiante. Do mesmo modo, um web site poder ser c onsiderado c omo um c onjunto de arquivos, princ ipalmente pginas HTML e imagens, que c onstituem o c ontedo ao qual o navegante tem acesso. Entretanto, no poderamos falar de navegante ou de navegao se estes arquivos HTML no estivessem devidamente conec tados entre eles e com o exterior de nosso site por meio de links hipertexto. Na verdade, o atrativo original do HTML reside no possvel empenho dos c ontedos dos arquivos introduzindo refernc ias sob a forma de links que permitem um ac esso rpido informa o desejada. Serviria pouc o se tivssemos na rede pginas isoladas as quais as pessoas no pudessem acessar ou pginas onde no fosse possvel ir para outras. Um link pode ser fac ilmente detectado em uma pgina. Basta deslizar o c ursor do mouse sobre as imagens ou o texto e ver c omo muda de sua forma original transformando-se por regra geral em uma mo com um dedo indicador. Adicionalmente, estes links costumam ir, no c aso dos textos, c oloridos e sublinhados para que o usurio no tenha dificuldade em os rec onhec er. Se no especific amos o contrrio (j teremos a ocasio de explicar c omo), estes links-texto estaro sublinhados e c oloridos de azul. No c aso das imagens que servem de link, veremos que esto delimitadas por uma marc ao azul por padro. Para colocar um link, utilizaremos as etiquetas <a> e </a>. Dentro da etiqueta de abertura devemos espec ificar o destino do link. Este destino ser introduzido sob a forma de atributo, no qual leva o nome href. A sintaxe geral de um link portanto da seguinte forma: <a href="destino">c ontedo</a> Sendo o c ontedo um texto ou uma imagem. a parte da pgina que se c oloc ar ativa e onde deveremos c lic ar para acessar ao link. E o destino por sua vez, ser uma pgina, um c orreio eletrnic o ou um arquivo. Em fun o do destino, os links so classicamente agrupados da seguinte forma: Links internos: os que se dirigem a outras partes dentro da mesma pgina. Links locais: os que se dirigem a outras pginas do mesmo site web. Links remotos: os que se dirigem pginas de outros sites web. Links com endereos de correio: para c riar uma mensagem de c orreio dirigido a um endere o. Links com arquivos: Para que os usurios possam fazer download de arquivos.
Links internos
So os links que apontam a um lugar diferente dentro da mesma pgina. Este tipo de link essenc ialmente utilizado em pginas onde o ac esso aos contedos pode ser prejudic ado devido
11/10/2010
ao grande tamanho da mesma. Mediante estes links, podemos oferec er aos visitantes a possibilidade de acessar rapidamente ao incio e ao final da pgina, ou tambm a diferentes pargrafos ou se es. Para criar um link deste tipo necessrio, alm do link origem propriamente dito, um segundo link que ser c olocado no destino. Vejamos mais c laramente c omo func ionam estes links com um simples exemplo: Suponhamos que queremos criar um link que aponte ao final da pgina. O primeiro a fazer ser c oloc ar nosso link origem. Colocaremos e escreveremos da seguinte forma: <a href="#abaixo">Ir abaixo</a> Link c om o final deste doc umento para que prove seu func ionamento: Ir abaixo Como pode ser visto, o contedo do link o texto "Ir abaixo" e o destino, abaixo, um ponto da mesma pgina que ainda no foi definido. Ateno ao smbolo # ; ele quem espec ific a ao navegador que o link aponta a uma se o particular. Em segundo lugar, temos que gerar um link no destino. Este link levar o nome "abaixo" para poder distingu-lo dos outros possveis links realizados dentro da mesma pgina. Neste c aso, a etiqueta que escreveremos ser esta: <a name="abaixo"></a> Na verdade, estes links, mesmo sendo teis, no so os mais utilizados. A tendncia geral a de c riar pginas (arquivos) independentes c om tamanhos mais reduzidos linkados entre eles por links loc ais (que veremos em seguida). Desta forma, evitamos o excesso de tempo de c arregamento de um arquivo e a introduo de exc esso de informa o que possa desviar a aten o do usurio. Uma aplicao c orrente destes links consiste em coloc ar um pequeno ndic e ao princ pio de nosso documento onde introduzimos links origem s diferentes se es. Paralelamente, ao final de cada se o introduzimos um link que aponta ao ndic e de forma que possamos guiar o navegante na busc a da informao til para ele.
Links locais
Como dissemos, um site web est c onstituido de pginas interc onexas. No c aptulo anterior vimos c omo linkar diferentes se es dentro de uma mesma pgina. Resta-nos estudar a maneira de relac ionar os distintos doc umentos HTML que c ompem nosso site web. Para criar este tipo de links, temos que c riar uma etiqueta da seguinte forma: <a href="arquivo.html">c ontedo</a> Por regra geral, para uma melhor organizao, os sites c ostumam estar ordenados por diretrios. Estes diretrios costumam conter diferentes se es da pgina, imagens, audios... por isso que em muitos c asos no nos ser vlido especific ar o nome do arquivo, e sim, o diretrio onde nosso arquivo.html est alojado. Se voc j tiver trabalhado c om MS-DOS no ter nenhum problema para c ompreender o modo de func ionamento. Somente dever ter c uidado em usar a barra "/" no lugar da contra-barra "\". Para aqueles que no sabem como mostrar um c aminho de um arquivo, aqui vai uma srie de
11/10/2010
indica es que lhes vo ajudar a compreender a forma de express-los. No nada difc il e com um pouc o de prtic a o far pratic amente sem pensar. 1. H de situar mentalmente no diretrio no qual se enc ontra a pgina c om o link. 2. Se a pgina destino est em um diretrio inc ludo dentro do diretrio no qual nos enc ontramos, temos de marcar o caminho numerando cada um dos diretrios pelos quais passamos at c hegar ao arquivo e separando-os pelo smbolo barra "/". No final, obviamente, esc revemos o arquivo. 3. Se a pgina destino enc ontra-se em um diretrio que inclui o da pgina com o link, temos que esc rever dois pontos seguidos e uma barra "../" tantas vezes quantas forem os nveis que subirmos na hierarquia de diretrios, at chegar no diretrio onde est loc alizado o arquivo destino. 4. Se a pgina enc ontra-se em outro diretrio no inc ludo nem inc luente do arquivo origem, teremos que subir c om a regra 3 por meio de ".." at enc ontrar o diretrio que englobe o diretrio que contm a pgina destino. A seguir faremos c omo a regra 2. Esc reveremos todos os diretrios pelos quais passamos at chegar ao arquivo. Exemplo:
Para esclarecer este ponto podemos fazer um exemplo a partir da estrutura de diretrios da imagem.
Para fazer um link desde index.html para yyy.html: <a href="secao1/paginas/yyy.html">conteudo</a> Para fazer um link desde xxx.html para yyy.html: <a href="../secao1/paginas/yyy.html">conteudo</a> Para fazer um link desde yyy.html para xxx.html: &<a href="../../secao2/xxx.html">conteudo</a>
Os links loc ais podem por sua vez j apontar mais precisamente a uma se o c onc reta, ao invs da pgina em geral. Este tipo de link costuma ser um hbrido de interno e local. A sintaxe deste tipo: <a href="arquivo.html#sec ao">conteudo</a> Como para os links internos, neste c aso temos que marcar a seo c om outro link do tipo: <a name="secao"></a> Como exemplo temos aqui um link que aponta ao captulo anterior ao final da pgina.
Links externos, de correio e para arquivos

Para terminar o tema dos links veremos os trs ltimos tipos de links que havamos assinalado. Links remotos So os links que se dirigem s pginas que se enc ontram fora do nosso site web, ou seja, qualquer outro doc umento que no faz parte de nosso site. Este tipo de link muito c omum e no representa nenhuma dific uldade. Simplesmente c oloc amos no atributo HREF de nossa etiqueta <A> a URL ou endere o da pgina com a qual queremos linkar. Ser algo parecido a isto:
11/10/2010
<a href=http://www.yahoo.c om.br>ir a yahoo.c om.br</a> Somente c abe destacar que todos os endere os web (URLs) c omeam por http:// . Isto indica que o protocolo pelo qual se acessa HTTP, o utilizado na web. No devemos nos esquec er de c oloc -lo porque seno os links sero tratados como links loc ais em nosso site. Outra c oisa interessante que no temos necessariamente que linkar c om uma pgina web com o protoc olo HTTP. Tambm podemos acessar rec ursos atravs de outros protoc olos c omo o FTP. Em tal caso, os endereos dos rec ursos no c omearo c om http:// e sim por ftp://. Links a endereos de correio Os links a endereos de c orreio so aqueles em que ao c lic - los nos abre uma nova mensagem de c orreio eletrnic o dirigido a um determinado endereo de mail. Estes links so muito habituais nas pginas web e a maneira mais rpida de oferec er ao visitante uma via para o c ontato c om o proprietrio da pgina. Para colocar um link dirigido a um endereo de correio c oloc amos mailto: no atributo href do link, seguido do endere o de c orreio ao qual se deve dirigir o link. <a href="mailto:juliana@c riarweb.c om">juliana@c riarweb.c om</a> Este link pode ser visto aqui: juliana@criarweb.c om
Conselho: Quando voc colocar links a endereos de correio, procure indicar no contedo do link (o que h entre <A> e </A>) o endereo de correio ao qual se deve escrever. Isto, porque se um usurio no tem configurado um programa de correio em seu computador no poder enviar mensagens, mas pelo menos poder copiar o endereo de mail e escrever o correio atravs de outro computador ou um sistema web-mail.
Alm do endere o do c orreio eletrnico do destinatrio, tambm podemos c oloc ar no link o assunto da mensagem. Isto se c onsegue colocando depois do endere o de correio uma interroga o, a palavra subject, o sinal de igual (=) e o assunto em conc reto. <a href="malito:juliana@c riarweb.c om?subjec t=contato atravs da pgina">juliana@c riarweb.com</a> Podemos c oloc ar outros atributos de mensagem c om uma sintaxe parec ida. Neste c aso indicamos tambm que o c orreio deve ir c om cpia a c olabore@criarweb.c om. <a href="mailto:juliana@c riarweb.c om?subjec t=contato atravs da pgina&cc =colabore@criarweb.com"> juliana@c riarweb.c om</a>
Nota: O visitante da pgina necessitar ter configurada uma conta de correio eletrnico em seu sitema para enviar as mensagens. Logicamente, se no tiver servio de correio no computador no ser possvel enviar as mensagens e este sistema de contato com o visitante no funcionar.
Links com arquivos Este no um tipo de link propriamente dito, mas o assinalamos aqui porque um tipo de link muito habitual e que apresenta alguma c omplica o para o usurio novato. O mecanismo o mesmo que conhecemos nos links loc ais e nos remotos, com a nic a partic ulariedade de que em vez de estar dirigidos para uma pgina web, est dirigido para um arquivo de outro tipo. Se queremos linkar c om um arquivo meu_arquivo.zip que se enc ontra no mesmo diretrio que a pgina, escreveramos um link assim: <a href="meu_arquivo.zip">Baixar meu_arquivo.zip</a>
11/10/2010
Se clic amos um link deste tipo nosso navegador baixar o arquivo, fazendo a pergunta tpica se: "Deseja abrir o arquivo ou salv- lo no c omputador?".
Conselho: No colocar na Internet arquivos executveis diretamente e sim, arquivos comprimidos. Por duas razes: 1. O arquivo ocupar menos, com o que ser mais rpido sua transferncia. 2. Ao perguntar ao usurio o que deseja fazer com o arquivo, lhe oferece a opo de abr-lo e salv-lo no computador. Ns geramente desejaremos que o usurio salve-o no computador e no o execute at que o tenha em seu disco rgido. Se decido abr-lo ao invs de salv-lo simplesmente o colocar em funcionamento e quando pare no estar salvo em seu sistema. Se os arquivos estiverem comprimidos obrigaremos ao usurios a descomprim-los em seu disco rgido antes de coloc-los em funcionamento, com o que nos certificamos que o usurio o salva em seu computador antes de execut-lo.
Se quisermos linkar outro tipo de arquivos como um PDF ou mundo VRML (Realidade Virtual para Internet) c ontinuaremos fazendo da mesma maneira. O navegador, se rec onhec e o tipo de arquivo, o responsvel de abr- lo utilizando o conec tador adequado para isso. Assim, se por exemplo linkamos c om um PDF colocar o programa Ac robat Reader em func ionamento para mostrar os c ontedos. Se linkamos c om um mundo VRML c oloc ar em func ionamento o plug-in que o usurio tenha instalado para ver os mundos virtuais (Cosmo, por exemplo) . Este seria um exemplo de link a um documento PDF. <a href="meu_documento.pdf">Baixar o PDF</a>
Imagens em HTML
Sem dvida, um dos aspec tos mais vistosos e atrativos das pginas web o grafismo. A introduo em nosso texto de imagens pode nos ajudar a explic ar mais fac ilmente nossa informa o e dar um ar muito mais esttic o. Porm, o abuso pode nos conduzir a uma sobrec arga que se traduz em uma distra o para o navegante, quem ter mais dificuldade em encontrar a informa o nec essria, e um maior tempo para c arregar a pgina o que pode ser de um efeito nefasto se nosso visitante no tem uma boa conexo ou se um pouc o impac iente. Neste captulos no explic aremos como c riar, nem como tratar as imagens, unicamente diremos que para isso utilizam- se aplicaes como Paint Shop Pro, Photoshop ou Corel Draw. Tambm no explic aremos as partic ularidades de c ada tipo de arquivo GIF ou JPG e a forma de otimizar nossas imagens. A este assunto ser dedicado em um futuro captulo. As imagens so armazenadas em forma de arquivos, princ ipalmente GIF (para desenhos) ou JPG (para fotos). Estes arquivos podem ser criados por ns mesmos ou podem ser baixados gratuitamente em sites web espec ializados. Sendo assim, nestes primeiros captulos nos limitaremos a explic ar como inserir e alinhar devidamente em nossa pgina uma imagem j c riada. A etiqueta que utilizaremos para inserir uma imagem <img> (image). Esta etiqueta no possui seu fec hamento c orrespondente e nela temos de especific ar obrigatoriamente o paradeiro de nosso arquivo mediante o atributo src (sourc e). A sintaxe fica ento da seguinte forma: <img src ="caminho para o arquivo"> Para expressar o c aminho, faremos da mesma forma que vimos para os links. As regras c ontinuam
11/10/2010
sendo as mesmas, o nico que muda que, no lugar de uma pgina destino, o destino um arquivo grfic o. Alm deste atributo, obviamente indispensvel para a visualizao da imagem, a etiqueta <img> nos prope outra srie de atributos de maior ou menor utilidade: Atributo alt Entre aspas deste atributo, c oloc aremos uma brevssima desc rio da imagem. Esta etiqueta no indispensvel, mas apresenta vrias utilidades. Primeiramente, durante o proc esso de c arregamento da pgina, quando a imagem no tiver sido ainda carregada, o navegador mostrar esta desc rio, com a qual o navegante poder ter uma idia do que se trata neste caso. Isto no to trivial se temos em c onta que alguns usurios navegam pela rede c om uma opo do navegador que desativa a amostra de imagens, com o que tais pessoas podero sempre saber de que se trata o grfic o e eventualmente mudar o modo com imagens para visualizar. Alm disso, determinadas aplicaes para incapac itados ou para telefones voc ais que no mostram imagens oferec em a possibilidade de l- las, o que nunca demais pensar nestes c oletivos. Em geral, podemos c onsiderar c omo ac onselhvel o uso deste atributo salvo para imagens de pouc a importnc ia e absolutamente indispensvel se a imagem em questo serve de link. Atributos height e width Definem a altura e largura respec tivamente da imagem em pixels. Todos os arquivos grfic os possuem umas dimenses de largura e altura. Estas dimenses podem ser obtidas a partir do prprio designer grfico ou tambm, c licando com o boto direito sobre a imagem vista pelo navegador para logo esc olher propriedades sobre o menu que se desdobra. O fato de explic itar em nosso c digo as dimenses de nossas imagens ajuda ao navegador a c onfecc ionar a pgina da forma que ns desejamos inc lusive antes das imagens serem baixadas. Assim, se as dimenses das imagens tiverem sido proporcionadas, durante o proc esso de c arregamento, o navegador reservar o espa o c orrespondente a c ada imagem c riando uma planific a o correta. O usurio poder come ar a ler tranqilamente o texto sem que este se mova de um lado a outro cada vez que se c arregue uma imagem. Alm desta utilidade, o alterar os valores destes atributos, uma forma imediata de redimensionar nossa imagem. Este tipo de utilidade no aconselhvel visto que, se o que pretendemos aumentar o tamanho, a perda da qualidade da imagem ser muito sensvel. Inversamente, se desejamos diminuir seu tamanho, estaremos usando um arquivo maior do que o nec essrio para a imagem que estamos mostrando, com o que aumentamos o tempo de desc arregamento de nosso documento desnec essariamente. importante insistir neste ponto j que muitos estreantes tm o pssimo costume de c riar grfic os pequenos redimensionando a imagem por meio desses atributos a partir de arquivos de tamanho desc omunal. Temos que pensar que o tamanho de uma imagem c om umas dimenses da metade no se reduz metade, e sim, que aproximadamente 4 vezes inferior. Atributo border Define o tamanho em pixels do quadro que rodeia a imagem. Dessa forma, podemos re-enquadrar nossa imagem se desejamos. partic ularmente til quando desejamos eliminar a borda que aparece quando a imagem serve de link. Em tal c aso teremos que especific ar border="0".
11/10/2010
Atributos vspace e hspace Serve para indic ar o espa o livre, em pixels, que tem que ser c oloc ado entre a imagem e outros elementos que a rodeiam, c omo texto, outras imagens, etc . Atributo lowsrc Com este atributo podemos indic ar um arquivo de baixa resolu o. Quando o navegador detec ta que a imagem tem este atributo, primeiro desc arrega e mostra a imagem de baixa resolu o (que oc upa muito pouco e que se transfere muito rpido). Posteriormente, desc arrega e mostra a imagem de resolu o adequada (assinalada com o atributo src , que se supe que oc upar mais e que ser mais lenta de se transferir). Est atributo est em desuso, mesmo supondo uma vantagem c onsidervel para que o desc arregamento inic ial se realize mais rpido e que um visitante possa ver uma amostra da imagem enquanto se descarrega a imagem real.
Dica: Utilizar imagens como links Isto quer dizer que uma imagem, assim como um texto, pode servir de link. Visto a estrutura dos links podemos muito facilmente adivinhar o tipo de cdigo necessrio. <a href="arquivo.html"><img src="imagem.gif"></a>
Exemplo prtico Ser bvio para os leitores, fazer agora uma pgina que contenha uma imagem vrias vezes repetidas, mas c om diferentes atributos. Uma das vezes que saia deve ser mostrada c om seu tamanho original e com uma borda de 3 pixels. Em outra oc asio a imagem aparec er sem borda, c om sua mesma altura e c om uma largura superior a original. Tambm mostraremos a imagem sem borda, c om sua mesma largura e c om uma altura superior a original. Por ltimo, mostraremos a imagem c om uma altura e largura maiores que as originais, mas proporc ionalmente igual que antes.
Vamos utilizar esta imagem para fazer o exerccio:
As dimenses originais da imagem so 28x21, o c digo fonte seria ento da seguinte forma: <img src ="img1.gif" <br> <br> <img src ="img1.gif" <br> <br> <img src ="img1.gif" <br> <br> <img src ="img1.gif" width="28" height="21" alt="Tamanho original" border="3"> width="68" height="21" alt="Ac hatada" border="0"> width="28" height="51" alt="Esticada" border="0"> width="56" height="42" alt="Dobro grande" border="0">
27/83
11/10/2010
Alinhamento de imagens com HTML

Vimos em seu momento o atributo align que nos permitia alinhar o texto direita, esquerda ou no c entro de nossa pgina. Dissemos que este atributo no era exc lusivo da etiqueta <p> e sim, que podia ser enc ontrado em outro tipo de etiquetas. Sendo assim, <img> uma dessas etiquetas que aceitam este atributo, mesmo sendo, neste c aso, o func ionamento diferente. Para alinhar uma imagem horizontalmente podemos fazer da mesma forma que o texto, ou seja, utilizando align dentro de uma etiqueta <p> ou <div>. Neste c aso, o que inc luiremos dentro desta etiqueta ser a imagem no lugar do texto: Este cdigo mostrar a imagem no c entro: <div align="center"><img src="logo.gif"></div> Fic aria assim:
Entretanto, j dissemos que a etiqueta <img> pode ac eitar o atributo align. Neste c aso, a utilidade que lhe damos diferente da anterior. O fato de utilizar o atributo align dentro da etiqueta <img> nos permite, no caso de dar os valores left ou right, justific ar a imagem do lado que desejamos uma vez que recheamos c om texto o lado oposto. Dessa forma, inc orporamos nossas imagens dentro do texto de uma maneira simples. Aqui se pode ver o tipo de c digo a c riar para obter tal efeito: <p> <img src ="imagem.gif" align="right">Texto to extenso quanto quisermos para que c ubra a parte esquerda da imagem. Continuo c oloc ando texto para que se veja o efeito, Bla bla bla bla bla bla bla... </p> Fic aria assim: Texto to extenso quanto quisermos para que c ubra a parte esquerda da imagem. Continuo c oloc ando texto para que se veja o efeito, Bla bla bla bla bla bla bla... <p> <img src ="imagen.gif" align="left">Texto to extenso quanto quisermos para que c ubra a parte direita da imagem. Continuo c oloc ando texto para que se veja o efeito, Bla bla bla bla bla bla bla... </p> Fic aria assim: Texto to extenso quanto quisermos para que c ubra a parte direita da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...
28/83
11/10/2010
Se em algum momento desejarmos preencher esse espao lateral, podemos passar a uma zona livre introduzindo uma quebra de linha <br> dentro do qual acresc entaramos um atributo: c lear Sendo ento, etiquetas do tipo: <br c lear="left"> Pular vertic almente at enc ontrar a lateral esquerdo livre. <br c lear="right"> Pular vertic almente at enc ontrar a lateral direita livre. <br c lear="all"> Pular vertic almente at enc ontrar ambas laterais livres. Exemplo de c lear: Texto to extenso quanto quisermos que c ubra a parte esquerda.
Isto est debaixo da imagem.
Existe outro tipo de valores que pode adotar o atributo align dentro da etiqueta <img>. Isto relativo ao alinhamento vertic al da imagem. Supomos que esc revemos uma linha ao lado de nossa imagem. Esta linha pode ficar, por exemplo ac ima, abaixo ou no meio da imagem. Ainda assim, pode que uma mesma linha tenhamos vrias imagens de alturas diferentes que podem ser alinhadas de distintas formas. Estes valores adic ionais so: Top Ajusta a imagem parte mais alta da linha. Isto quer dizer que, se existe uma imagem mais alta, ambas imagens apresentaro a borda superior na mesma altura. Bottom Ajusta o baixo da imagem ao texto. Absbottom Colocar a borda inferior da imagem ao nvel do elemento mais baixo da linha. Middle Faz coincidir a base da linha de texto c om o meio vertic al da imagem. Absmiddle Ajusta a imagem ao meio absoluto da linha. Estas explicaes, que podem ser um pouc o c omplicadas, sero mais facilmente assimiladas c om um pouc o mais de prtic a. Falta explicar c omo introduzir debaixo da imagem um p de foto ou uma explica o. Para isso, teremos que ver antes de mais nada as tabelas, nos prximos captulos...
Formatos grficos para pginas web

11/10/2010
O c omponente grfic o das pginas web tem muita importncia, que o que faz c om que estas seja vistosas e o que nos permite aplic ar nossa c riatividade para fazer o design do site uma tarefa agradvel. tambm uma ferramenta para aproximar os sites ao mundo onde vivemos, entretanto, tambm o causador de graves erros nas pginas e fazer destas, em alguns casos, um martrio para o visitante. As noes bsic as para o uso de arquivos grficos so simples, c onhec - las, mesmo que seja ligeiramente, nos ajudar a c riar sites agradveis e rpidos. No cometer erros no uso das imagens fundamental, mesmo que no seja um designer e as imagens que utiliza sejam feias, utilize-as bem e assim, estar propic iando mais visitas ao seu site. Tipos de arquivos Na Internet se utilizam principalmente dois tipos de arquivos grficos GIF e JPG, pensados especialmente para otimizar o tamanho que oc upam em disco, j que os arquivos pequenos se transmitem mais rapidamente pela Rede. O formato de arquivo GIF se usa para as imagens que tenham desenhos, enquanto que o formato JPG se usa para as fotografias. Os dois comprimem as imagens para salv-las. A forma de c omprimir a imagem que utiliza cada formato o que os tornam ideais para um propsito ou outro. Adic ionalmente, pode-se usar um terc eiro formato grfic o nas pginas web, o PNG. Este formato no tem tanta ac eita o como o GIF ou o JPG, por vrias razes, entre elas: o desc onhecimento do formato por parte dos desenvolvedores, que as ferramentas habituais para tratar grfic os (c omo por exemplo, Photoshop) geralmente no suportam, e que os navegadores antigos tambm tm problemas para visualiz- las. Entretanto, o formato se c omporta muito bem quanto a c ompreenso e a qualidade do grfic o c onseguinte, pelo que seria til se chega a extender seu uso. GIF Alm se ser um arquivo ideal para as imagens que esto desenhadas, tem muitas outras carac tersticas que so importantes e teis. Compresso: muito boa para desenhos, c omo j foi dito. Inclusive pode ser interessante se a imagem muito pequena, mesmo que seja uma foto.
Um logotipo um exemplo claro de imagem GIF
Transparncia: uma utilidade para definir certas partes do desenho como transparentes. Desse modo, podemos c oloc ar as imagens sobre distintos fundos sem que se veja o quadrado onde est inserido o desenho, vendo em troc a a silhueta do desenho em questo. Para criar um gif transparente devemos utilizar um programa de desenho grfico, c om o qual podemos indicar que c ores do desenho queremos que sejam transparentes. Geralmente, definimos a transparncia quando vamos salvar o grfic o.
Parte desta imagem transparente
Cores: Com este formato grfico podemos utilizar conjuntos de 256 c ores ou menos. Este um detalhe muito importante, visto que quanto menos cores utilizarmos na imagem, em geral, menos oc upar o arquivo. s vezes, mesmo utilizando menos c ores em um grfic o, este no perde muita qualidade, c hegando a ser inaprecivel vista. Em alguns programas podemos modific ar a quantidade de c ores ao salvar o arquivo, em outros, fazemos enquanto c riamos o grfico.
32 C ores
16 C ores
8 C ores
Imagem tomada com distintas aquarelas de cores. Pode-se apreciar como que com poucas cores se v bem o grfico e como perde um pouco medida em que lhe retiramos mais cores.
30/83
11/10/2010
JPG Vejamos agora quais so as c arac tersticas fundamentais do formato JPG: Compresso: Tal c omo dissemos anteriormente, sua gama de c ompresso torna ideal este formato para salvar fotografias. Alm disso, c om JPG podemos definir a qualidade da imagem, c om qualidade baixa o arquivo oc upar menos, e vic e- versa.
Uma fotografia com formato JPG
Transparncia: Este formato no tem possibilidade de criar reas transparentes. Se desejamos c oloc ar uma imagem c om uma rea que parea transparente proc ederemos assim: c om nosso programa de desenho grfic o faremos com que o fundo da imagem seja o mesmo que o da pgina onde queremos c oloc -la. Em Uma tentativa de muitos c asos, os fundos da imagem e a pgina parecero o mesmo. transparncia em
JPG.
Cores: JPG trabalha sempre com 16 milhes de cores, ideal para fotografias. Otimizar arquivos Para que as imagens ocupem o menos possvel e se transfiram rapidamente pela Rede devemos aprender a otimizar os arquivos grfic os. Para isso, devemos fazer o seguinte: Para os arquivos GIF: Reduziremos o nmero de c ores de nossa aquarela. Isto se faz c om nosso editor grfic o, em muitos casos poderemos fazer ao salvar o arquivo.
GIF 256 cores - 11,1 KB
Para os arquivos JPG: Ajustaremos a qualidade do arquivo quando estivermos salvando. Este formato nos permite baixar muito a qualidade da imagem sem que esta perc a muito em seu aspecto visual.
JPG qualidade 0 3 KB
31/83
11/10/2010
JPG qualidade 20 5,9 KB
JPG qualidade 50 10 KB
imprescindvel dispor para otimizar a imagem de uma boa ferramenta que nos permita configurar estas carac terstic as da imagem c om liberdade e facilidade. Photoshop 5.5 ou 6 um programa bastante recomendvel, pois incorpora uma opo que se c hama "Salvar para Web" c om a qual podemos definir as cores do gif, a qualidade do JPG e outras op es em vrias amostras. Assim, c om todas as opes configurveis, vendo os resultados do tamanho do arquivo, podemos otimizar a imagem de uma maneira prec isa com os resultados que desejamos. Tambm existem no merc ado outros programas que nos Photoshop uma ferramenta excelente permitem otimizar estas imagens de maneira surpreendente. para otimizar arquivos. Vendo vrias Uma vez que c riamos a imagem, a passamos por estes cpias podemos escolher a mais adequada. programas e nos c omprimem ainda mais o arquivo, fazendolhe rpido de transferir e, portanto, mais otimizado para Internet. Ao ser estas utilidades to especializadas, os resultados costumam ser melhores que c om os programas de edio grfica. Exemplos de otimizadores grficos: - WebGraphic s Optimizer - ProJPG, GIF Imantion E com verses On-line: - GIF Wizard
As cores e HTML
As c ores possuem um papel muito importante na composi o de webs. So indicadas em valores RGB, ou seja, que para c onseguir uma c or qualquer misturaremos quantidades de Vermelho, Verde e Azul. Os valores RBG so indic ados em numera o hexadec imal, em base 16. (Os dgitos podem c resc er at 16). Como no existem tantos dgitos numricos se utilizam as letras da A F. 0=0
Tabela de cor
4=4
8=8
C=12
32/83
11/10/2010
1=1 2=2 3=3
5=5 6=6 7=7
9=9 A=10 B=11
D=13 E=14 F=15
Para c onseguir uma c or, misturaremos valores desta maneira:
RRGGBB
Onde cada valor pode crescer desde 00 at FF. Exemplo: Como se mudaria a fonte para esc rever em vermelho: <font c olor="#FF0000">Vermelho</font> Ao Atributo cor lhe damos um valor RGB em formato hexadecimal. O carac tere # se c oloc a ao princ pio da expresso. Outras cores: Laranja Azul escuro Cores compatveis em todos os sistemas Como as pginas web tm que ser vistas por todos os usurios, e os sistemas que utilizam para entrar so distintos, h que utilizar c ores compatveis c om a paleta de todos eles. A forma de c onseguir isto limitando nossas c ores aos que se podem c onseguir utilizando a seguinte norma:
Utilizaremos sempre estes valores:
#FF8000 #000080
Verde turquesa #339966
00 33 66 99 CC FF Exemplos: #3366FF #FF9900 #666666 Consegue-se as seguintes cores:

#000000 #003300 #006600 #009900 #00C C 00 #00FF00 #330000 #333300 #336600 #339900 #33C C 00 #33FF00 #660000 #663300 #666600 #669900 #66C C 00 #000033 #003333 #006633 #009933 #00C C 33 #00FF33 #330033 #333333 #336633 #339933 #33C C 33 #33FF33 #660033 #663333 #666633 #669933 #66C C 33 #000066 #003366 #006666 #009966 #00CC 66 #00FF66 #330066 #333366 #336666 #339966 #33CC 66 #33FF66 #660066 #663366 #666666 #669966 #66CC 66 #000099 #003399 #006699 #009999 #00CC 99 #00FF99 #330099 #333399 #336699 #339999 #33CC 99 #33FF99 #660099 #663399 #666699 #669999 #66CC 99 #0000C C #0033C C #0066C C #0099C C #00C CC C #00FFCC #3300C C #3333C C #3366C C #3399C C #33C CC C #33FFCC #6600C C #6633C C #6666C C #6699C C #66C CC C #0000FF #0033FF #0066FF #0099FF #00CC FF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CC FF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CC FF
33/83
11/10/2010
#66FF00 #990000 #993300 #996600 #999900 #99C C 00 #99FF00 #CC 0000 #CC 3300 #CC 6600 #CC 9900 #C C CC 00 #C CFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFC C00 #FFFF00

#66FF33 #990033 #993333 #996633 #999933 #99C C 33 #99FF33 #C C0033 #C C3333 #C C6633 #C C9933 #C C CC 33 #C CFF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFC C33 #FFFF33 #66FF66 #990066 #993366 #996666 #999966 #99CC 66 #99FF66 #C C0066 #C C3366 #C C6666 #C C9966 #CC C C66 #C C FF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFC C 66 #FFFF66 #66FF99 #990099 #993399 #996699 #999999 #99CC 99 #99FF99 #C C0099 #C C3399 #C C6699 #C C9999 #CC C C99 #C C FF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFC C 99 #FFFF99 #66FFCC #9900C C #9933C C #9966C C #9999C C #99C CC C #99FFCC #C C 00C C #C C 33C C #C C 66C C #C C 99C C #C CC C CC #CC FFC C #FF00CC #FF33CC #FF66CC #FF99CC #FFCC C C #FFFFC C #66FFFF #9900FF #9933FF #9966FF #9999FF #99CC FF #99FFFF #C C00FF #C C33FF #C C66FF #C C99FF #CC C CFF #C C FFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFC C FF #FFFFFF
Tabelas em HTML
Uma tabela um conjunto de clulas organizadas dentro das quais podemos alojar distintos c ontedos. princ pio, poderia parec er que as tabelas so raramente teis e que podem ser utilizadas simplesmente para listar dados c omo agendas, resultados e outros dados de uma forma organizada. Nada mais distante da realidade. Hoje, grande parte dos desenhadores de pginas baseia seu planejamento neste tipo de engenhoc a. De fato, uma tabela nos permite organizar e distribuir os espaos da melhor forma. Pode nos ajudar a gerar textos em colunas c omo os jornais, prefixar os tamanhos oc upados por distintas se es da pgina ou c oloc ar de uma maneira simples uma legenda a uma imagem. Pode ser que a princpio seja um pouco complic ado trabalhar com estas estruturas mas, se desejamos criar uma pgina de qualidade, mais cedo ou mais tarde teremos que nos ver c om elas e nos dar conta das possibilidades que nos oferec em. Para come ar, nada mais simples do que pelo princ pio: as tabelas so definidas pelas etiquetas <table> e </table> Dentro dessas duas etiquetas c oloc aremos todas as outras etiquetas, textos e imagens que daro forma e c ontedo tabela. As tabelas so descritas por linhas da esquerda para direita. Cada uma destas linhas definida por outra etiqueta e seu fec hamento: <tr> e </tr> Ainda assim, dentro de c ada linha, haver diferentes c lulas. Cad uma dessas clulas ser definida por outro par de etiquetas:<td> e </td>. Dentro desta etiqueta ser onde c oloc aremos nosso contedo. Aqui temos um exemplo de estrutura de tabela: <table> <tr>
11/10/2010
<td>Clula <td>Clula </tr> <tr> <td>Clula <td>Clula </tr> </table>
1, linha 1</td> 2, linha 1</td> 1, linha 2</td> 2, linha 2</td>
O resultado: Clula 1, linha 1 Clula 2, linha1 Clula 1, linha 2 Clula 2, linha 2 NOTA: At aqui vimos todas as etiquetas que necessitamos c onhecer para c riar as tabelas. Existem outras etiquetas, mas o que podemos c onseguir c om elas se pode c onseguir tambm usando as que j vimos. Por exemplo, assinalamos a etiqueta <th>, que serve para criar uma clula cujo contedo esteja formatado c omo um ttulo ou c abealho da tabela. Na prtic a, o que faz c oloc ar em negrito e c entralizado o contedo dessa c lula, o que se pode conseguir aplicando as c orrespondentes etiquetas dentro da c lula. Assim: <td align="c enter"><b>Contedo da c lula</b></td> A partir desta idia simples, as tabelas adquirem outra magnitude quando lhes incorporamos toda uma bateria de atributos aplic ados sobre c ada tipo de etiquetas que as compem. Ao longo dos prximos c aptulos nos aprofundaremos no estudo desses atributos de forma a proporc ionar-lhe tudo que til e indispensvel para um bom arranque em pginas.
Tabelas em HTML. Atributos para filas e clulas.

Vimos no captulo anterior que as tabelas esto compostas de linhas que, por sua vez, contm c lulas. As c lulas so delimitadas pelas etiquetas <td> ou pelas etiquetas <th> (se queremos texto em negrito e centralizado) e c onstituem um entorno independente do resto do documento. Isto quer dizer que: Podemos usar pratic amente qualquer tipo de etiqueta dentro da etiqueta <td> para, desta forma, dar forma a seu c ontedo. As etiquetas situadas no interior da c lula no modificam o resto do documento. As etiquetas de fora da c lula no so tidas em c onta por esta. Sendo assim, podemos espec ific ar o formato de nossas c lulas a partir de etiquetas introduzidas em seu interior ou mediante atributos c oloc ados dentro da etiqueta de c lula <td> ou tambm, em alguns casos, dentro da etiqueta <tr>, se desejamos que o atributo seja vlido para toda a linha. A forma mais til e atual de dar forma s clulas a partir das folhas de estilo em c ascata que j teremos a oportunidade de abordar mais adiante. Vemos em seguida alguns atributos teis para a c onstru o de nossas tabelas. Comeamos vendo alguns atributos que nos permite modific ar uma clula em concreto ou toda uma linha. align Justific a o texto da clula da mesma forma que se fosse o de um pargrafo. valign Podemos esc olher se queremos que o texto aparea ac ima (top), no c entro (middle) ou abaixo (bottom) da c lula. bgcolor D c or c lula ou esc olha de linha.
11/10/2010
bordercolor Define a c or da borda. Outros atributos que podem ser unicamente atribudos a uma c lula e no ao um c onjunto de c lulas de uma linha so: background Permite- nos c olocar um fundo para a clula a partir de um link a uma imagem. height Define a altura da c lula em pixels ou porcentagem. width Define a largura da c lula em pixels ou porc entagem colspan Expande um c lula horizontalmente. rowspan Expande um c lula vertic almente.
Nota: O atributo height no funciona em todos os navegadores, ademais, seu uso no est muito estendido. As clulas em geral, tm a altura que necessitam para caber todo o contedo que tenha inserido, ou seja, crescem o suficiente para que caiba o que colocamos dentro. O atributo width sim que funciona em todos os navegadores e deve ser utilizado constantemente. Se lhe atribumos uma largura clula, a largura ser respeitada e se a tal clula tiver muito texto ou qualquer outro contedo, a clula crescer um tanto para baixo quanto for o necessrio para caber o que colocamos. Uma observao neste ltimo pargrafo. Trata-se que se definimos uma clula de uma largura 100, por exemplo e colocamos na clula um contedo como uma imagem que mea mais de 100 pixels, a clula crescer em horizontalmente tanto quanto for necessrio para que a imagem caiba. Se o elemento, mesmo mais largo, fosse divisvel (como um texto) a largura seria respeitada e o texto cresceria para baixo, ou o que o mesmo, em altura, como assinalamos no pargrafo anterior.
Estes ltimos quatro atributos desc ritos so de grande utilidade. Conc retamente, height e width nos ajudam a definir as dimenses de nossas c lulas de uma forma absoluta (em pixel ou em pontos de tela) ou de uma forma relativa, ou seja, por porc entagens referentes ao tamanho total da tabela. Por exemplo: <td width="80"> Dar uma largura de 80 pixels clula. Entretanto, <td width =80%> Dar uma largura c lula do 80% da largura da tabela. H de ter em c onta que, definidas as dimenses das clulas, o navegador vai fazer o que bondosamente puder para satisfazer ao programador. Isto quer dizer que pode que em algumas oc asies o resultado que obtenhamos no seja o esperado. Concretamente, se o texto apresenta uma palavra exc essivamente c omprida pode que a largura da clula se veja aumentada para manter a palavra na mesma linha. Por outro lado, se o texto muito grande , a c lula aumentar sua para poder mostrar todo o seu c ontedo. Analogamente se, por exemplo, definimos duas larguras distintas s c lulas de uma mesma coluna, o navegador no saber qual atender. por isso que conveniente ter bem claro desde o princpio c omo a tabela que queremos desenhar. No demais saber se pr-desenhamos no papel se a c omplexidade importante. O HTML em geral fcil, mas as tabelas podem converte- se em um verdadeiro quebra-c abea se no chegamos a compreende-las devidamente. Os atributos rowspan e c olspan so tambm utilizados freqentemente. Gra as a isso possvel expandir c lulas fundindo estas c om suas vizinhas. O valor que podem tomar estas etiquetas numrico. O nmero representa a quantidade de c lulas fundidas. Assim, <td colspan="2"> Fundir a c lula em questo com sua vizinha direita.
11/10/2010
Esta c lula tem um c olspan="2" Clula normal Do mesmo modo, <td rowspan="2"> Clula Normal Outra c lula normal Outra c lula
Esta clula tem rowspan="2", por isso tem fundida a c lula abaixo.
A c lula expandir para baixo fundindo- se c om a c lula inferior. O resto dos atributos apresentados apresenta uma utilidade e um uso bastante bvio. Por isso, os deixamos a sua prpria investiga o.
Tabelas em HTML. Atributos da tabela e concluso.

Alm dos atributos espec fic os de c ada clula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos atributos que nos oferece a prpria etiqueta <table>. A seguir, mostramos aqueles que nos podem parec er princ ipio mais importantes: align Alinha horizontalmente a tabela em relao ao seu entorno.
background Permite-nos colocar um fundo para a tabela desde um link a uma imagem. bgcolor border D c or de fundo tabela. Define o nmero de pixels da borda principal.
bordercolor Define a c or da borda. cellpadding Define, em pixels, o espa o entre as bordas da c lula e o contedo da mesma. cellspacing Define o espao entre as bordas (em pixels). height width Define a altura da tabela em pixels ou porcentagem. Define a largura da tabela em pixels ou porcentagem.
Os atributos que definem as dimenses, height e width, func ionam de uma maneira anloga ao das clulas, tal c omo vimos no c aptulo anterior. Contrariamente, o atributo align no nos permite justific ar o texto de c ada una das c lulas que compem a tabela, mas sim que permite, justificar a prpria tabela em rela o ao seu entorno. Vamos c oloc ar trs exemplos de alinhamento de tabelas, c entralizadas, alinhadas direita e esquerda.
Esta tabela est centralizada
37/83
11/10/2010
Exemplo de tabela centralizada
Esta tabela est centralizada (aling="center"). Tem somente uma clula.
Este seria um texto qualquer colocado ao lado de uma tabela centralizada. Para que seja visto o efeito de alinhamento da Esta tabela est alinhada direita (aling="right"). Tem somente uma clula.
Exemplo de tabela devemos colocar um texto ao lado e o texto tabela alinhada ir rodear a tabela, assim como ocorreria como as imagens alinhadas a um lado. direita Exemplo de tabela alinhada esquerda
Esta tabela est alinhada esquerda (aling="left"). Tem somente uma clula.
Para que seja visto o efeito de alinhamento da tabela, devemos colocar um texto ao lado e o texto ir rodear a tabela, assim como ocorreria com as imagens alinhadas a um lado.
Os atributos cellpading e c ellspac ing ajudaro a dar a nossa tabela um aspec to mais esttico. princ pio pode nos parec er um pouc o c onfuso seu uso mas c om um pouco de prtic a j ser sufic iente para saber utiliz-los. Na seguinte imagem podemos ver graficamente o significado destes atributos:
Voc mesmo pode comprovar que os atributos definidos para uma c lula tm prioridade em rela o aos definidos para uma tabela. Podemos definir, por exemplo, uma tabela c om a c or de fundo vermelha e uma das clulas c om a c or de fundo verde. E assim, toda a tabela ser vista de c or vermelha manos a c lula verde. Da mesma forma, podemos definir uma c or azul para as bordas da tabela e fazer com que uma c lula particular seja mostrada c om uma borda vermelha. (Apesar de que isto no funcionar em todos os navegadores devido ao fato de alguns no reconhec erem o atributo bordercolor.) Tabela de cor O atributo bgc olor da vermelha de tabela est em vermelho. fundo Clula normal Esta clula est em verde. Tem o atributo bgcolor na c or verde
Tabelas aninhadas O uso de tabelas aninhadas tambm muito til. Da mesma forma que podamos inc luir listas dentro de outras listas, as tabelas podem ser inc ludas dentro de outras. Assim, podemos incluir uma tabela dentro da c lula de outra. A forma de func ionamento c ontinua sendo o mesmo apesar de que a situao pode se c omplicar se o nmero de tabelas inc ludas dentro de outras for elevado. Vamos ver um cdigo de um aninhamento de tabelas. Veremos primeiro o resultado e em seguida, o cdigo, pois assim c onseguiremos entend-lo melhor.
Clula da tabela princ ipal
Tabela aninhada, clula 1 Tabela aninhada, c lula 2 Tabela aninhada, clula 3 Tabela aninhada, c lula 4
Este seria o cdigo:

11/10/2010
<table c ellspacing="10" c ellpadding="10" border="3"> <tr> <td align="center"> Clula da tabela principal </td> <td align="center"> <table c ellspac ing="2" cellpadding="2" border="1"> <tr> <td>Tabela aninhada, clula 1</td> <td>Tabela aninhada, clula 2</td> </tr> <tr> <td>Tabela unida, c lula 3</td> <td>Tabela aninhada, clula 4</td> </tr> </table> </td> </tr> </table> Exemplos prticos Estas so as informaes que pretendamos transmitir- lhes sobre as tabelas em HTML. Agora seria importante fazer algum exemplo de realiza o de uma tabela um pouco mais complexa. Por exemplo, a seguinte: Animais em perigo de extino Nome Baleia Urso Pardo Linc e Tigre Cabe as Previso 2010 Previso 2020 6000 50 10 300 4000 0 210 1500
Outro exemplo de tabela com a qual podemos praticar: Climas de Amrica do Sul Norte da Venezuela Amric a de Sul. Colmbia Pases como: Equador Per Sul da Amrica do Sul. Pases como: Argentina Chile Uruguai Paraguai Climas martimos c om veres secos, com invernos sec os, c limas frios, c lima de estepe, clima desrtic o.
Floresta tropic al, c lima de savana, c lima martimo com invernos sec os.
39/83
11/10/2010
Formulrios HTML
At agora vimos a forma na qual o HTML providencia e mostra a informa o, essenc ialmente mediante o texto, imagens e links. Falta ver de que forma podemos trocar informa es c om nosso visitante. Desde ento, este novo aspec to primordial para a grande quantidade de a es que se podem realizar mediante o Web: Comprara um artigo, preencher uma enquete, enviar um c omentrio ao autor... Vimos anteriormente que poderamos, mediante os links, entrar em contato diretamente c om um c orreio eletrnic o. Entretanto, esta op o pode ser em alguns casos pouco verstil se o que desejamos que o navegante nos envie uma informao bem prec isa. atravs dele, o HTML que propem outra solu o muito mais ampla: Os formulrios. Os formulrios so estas famosas c aixas de texto e botes que podemos enc ontrar em muitas pginas web. So muito utilizados para realizar busc ar ou tambm para introduzir dados pessoais, por exemplo, em sites de comrcios eletrnic o. Os dados que o usurio introduz nestes c ampos so enviados ao c orreio eletrnic o do administrador do formulrio ou tambm, em um programa que se encarrega de proc ess-lo automatic amente. Usando HTML podemos unicamente enviar o formulrio a um c orreio eletrnic o. Se quisermos proc essar o formulrio mediante um programa, a coisa pode ser um pouco mais c omplexa, j que teremos que empregar outras linguagens mais sofistic adas. Neste caso, a solu o mais simples utilizar os programas pr-desenhados que nos propem um grande nmero de servidores de hospedagem e que nos permitem armazenar e proc essar os dados em forma de arquivo ou outros formatos. Se sua pgina es ta hospedada em um servidor que no lhe propem estes tipos de vantagens, voc sempre poder recorrer a servidores de terceiros que oferec em este ou outros tipos de servios gratuitos para webs. c laro que tambm existe outra alternativa que a de aprender linguagens como ASP ou PHP que nos permitir, entre outras c oisas, o tratamento de formulrios. Os formulrios so definidos por meio das etiquetas <form> e </form>. Entre estas duas etiquetas c oloc aremos todos os campos e botes que c ompem o formulrio. Dentro desta etiqueta <form> devemos espec ificar alguns atributos.: Action Define o tipo de a o a realizar c om o formulrio. Como j dissemos, existem duas possibilidades: O formulrio enviado a um endere o de c orreio eletrnic o O formulrio enviado a um programa ou script que processa seu c ontedo. No primeiro c aso, o c ontedo do formulrio enviado ao endereo de correio eletrnic o especific ada por meio de uma sintaxe deste tipo: <form ac tion="mailto:endereo@c orreio.com"> Se o que queremos que o formulrio seja processado por um programa, temos de espec ificar o endere o do arquivo que c ontem o tal programa. A etiqueta fic aria neste c aso da seguinte forma: <form ac tion="endereo do arquivo"...> A forma na qual se expressa a localiza o do arquivo que contm o programa a mesma que a vista para os links. Method Este atributo se enc arrega de especific ar a forma na qual o formulrio enviado. Os dois valores possveis que este atributo pode tomar so post e get. A efeitos prtic os e salvo se lhe disserem o contrrio, daremos sempre o valor post. Enctype
11/10/2010
Utiliza- se para indicar a forma na qual viajar a informa o que for mandada pelo formulrio. No c aso mais corrente, enviar o formulrio por c orreio eletrnico, o valor deste atributo deve ser "text/plain". Assim, c onseguimos que o contedo do formulrio seja enviado como texto plano dentro do e-mail. Se quisermos que o formulrio se proc esse automaticamente por um programa, geralmente no utilizaremos este atributo, de forma que tome seu valor padro, ou seja, no inc luiremos enctype dentro da etiqueta <form>. Exemplo de etiqueta <form> completa Assim, para o c aso mais habitual - o envio do formulrio por c orreio - a etiqueta de c ria o do formulrio ter o seguiente aspec to: <form ac tion="mailto:endereo@c orreio.com (ou o nome do arquivo de proc esso)" method="post" enctype="text/plain"> Entre esta etiqueta e seu fechamento, c oloc aremos o resto de etiquetas que daro forma ao nosso formulrio, as quais sero vistas nos prximos c aptulos.
Elementos de formulrios. Campos de texto.

O HTML nos propem uma grande diversidade de alternativas na hora de c riar nossos formulrios. Estas vo desde a c lssic a c aixa de texto at a lista de op es passando pelas c aixas de valida o. Veremos em que c onsiste c ada una destas modalidades e c omo podemos implement-las em nosso formulrio. Texto curto As c aixas de texto so c oloc adas por meio da etiqueta <input>. Dentro desta etiqueta temos de especific ar o valor de dois atributos: type e name. A etiqueta da seguinte forma: <input type="text" name="nome"> Deste modo expressamos nosso desejo de c riar uma c aixa de texto c ujo c ontedo ser c hamado nome (por exemplo). O aspec to deste tipo de c aixas c onhecido, c omo pode ser visto aqui:
O nome do elemento do formulrio de grande importnc ia para poder identific - lo em nosso programa de proc essamento ou no e- mail rec ebido. Por outro lado, importante indic ar o atributo type, j que, c omo veremos, existem outras modalidades de formulrio que usam esta mesma etiqueta. O emprego destas caixas est fundamentalmente destinado tomada de dados breves: palavras ou c onjuntos de palavras de longitude relativamente c urta. Veremos mais adiante que existe outra forma de tomar textos mais longos a partir de outra etiqueta. Alm destes dois atributos, essenc iais para o c orreto func ionamento de nossa etiqueta, existem outra srie de atributos que podem ser de utilidade, mas que no so impresc indveis. size
11/10/2010
Define o tamanho da c aixa em nmero de carac teres. Se ao escrever o usurio chega ao final da c aixa, o texto ir desfilando medida que se esc reve fazendo desaparecer a parte de texto que fic a esquerda. maxlength Indic a o tamanho mximo do texto que pode ser tomado pelo formulrio. importante no c onfund-lo c om o atributo size. Enquanto o primeiro define o tamanho aparente da caixa de texto, maxlength indic a o tamanho mximo real do texto que pode ser esc rito. Podemos ter uma c aixa de texto c om um tamanho aparente (size) que menor do que o tamanho mximo (maxlength). O que oc orrer neste c aso que, ao esc rever, o texto ir desfilando dentro da c aixa at que cheguemos ao seu tamanho mximo definido por maxlength, momento no qual ser impossvel continuar esc revendo. value Em alguns casos pode ser interessante atribuir um valor definido ao c ampo em questo. Isto pode ajudar ao usurio a preenc her mais rapidamente o formulrio ou a dar alguma idia sobre a natureza de dados que se requerem. Este valor inicial do c ampo pode ser expresso mediante o atributo value. Vejamos seu efeito c om um exemplo simples: <input type="text" name="nome" value="Peric o Palotes"> Gera um c ampo deste tipo: Josefa Palotes
Nota: estamos obrigados a utilizar a etiqueta <form> Para que fique mais claro este contedo, ressaltamos: Quando queremos utilizar em qualquer situao elementos de formulrio devemos escrev-los sempre entre as etiquetas <form> y </form>. C aso contrrio, os elementos sero vistos perfeitamente no Explorer, mas no no Netscape. C om outras palavras, no Netscape no se visualizam os elementos de formulrio a no ser que estejam colocados entre as correspondentes etiquetas de incio e fim de formulrio. por isso que para mostrar um campo de texto no adianta colocar a etiqueta <input>, e sim, coloca-la dentro de um formulrio. Assim: <form> <input type="text" name="nome" value="Josefa Palotes"> </form>
Veremos posteriormente que este atributo pode ser relevante em determinadas situaes. Texto oculto Podemos esc onder o texto esc rito por meio de asterisc os de forma a fornec er uma c erta c onfiabilidade. Este tipos de campos so anlogos aos de texto c om somente uma diferena: deslocando o atributo type="text" por type="password": <input type="password" name="nome"> Neste caso, pode ser comprovado que ao esc rever dentro do campo no lugar de texto sero vistos asterisc os. Estes c ampos so ideais para a introdu o de dados c onfidenciais, principalmente cdigos de ac esso. Isto pode ser visto em funcionamento a seguir:
Texto longo Se desejarmos colocar disposi o do usurio um campo de texto onde possa esc rever c omodamente sobre um espa o c omposto de vrias linhas, temos de c onvoc ar uma nova etiqueta: <textarea> e seu fec hamento c orrespondente.
11/10/2010
Estes tipos de c ampos so prtic os quando o contedo a enviar no um nome, telefone ou qualquer outro dado breve, e sim, um c omentrio, opinio, etc. Dentro da etiqueta textarea deveremos indic ar, c omo para o c aso visto anteriormente, o atributo name para associar o contedo a um nome que ser semelhante a uma varivel nos programas de proc esso. Alm disso, podemos definir as dimenses do campo a partir dos seguintes atributos: rows Define o nmero de linhas do c ampo de texto. cols Define o nmero de c olunas do c ampo de texto. A etiqueta fic a portanto, desta forma: <textarea name="comentrio" rows="10" cols="40"></textarea> O resultado o seguinte:
Mesmo assim, possvel definir o c ontedo do campo. Para isso, no usaremos o atributo value e sim, que esc reveremos dentro da etiqueta o c ontedo que lhe desejamos atribuir. Vejamos: <textarea name="comentrio" rows="10" cols="40">Escreva seu c omentrio....</textarea> Ter c omo resultado: Escreva seu comentrio....
Outros elementos de formulrios

Efetivamente, os textos so uma maneira muito prtic a de fazer c hegar a informao do navegante. Porm, em muitos c asos, os texto so dific ilmente adaptveis a programas que possam proc ess-los devidamente ou tambm pode ser que seu c ontedo no se ajuste ao tipo de informa o que requeremos. por isso que, em determinados casos, pode ser mais efetivo propor uma esc olha ao navegante a partir da exposio de uma srie de opes.
11/10/2010
Este o c aso de, por exemplo, oferec er uma lista de pases, o tipo de c arto de c rdito para um pagamento, etc . Estes tipos de op es podem ser expressadas de diferentes formas. Vejamos a seguir quais so: Listas de opes As listas de op es so esse tipo de menus desdobrveis que nos permite esc olher uma (ou vrias) das mltiplas op es que nos propem. Para constru- las utilizaremos uma etiqueta com seu respectivo fec hamento: <selec t> Como para os casos j vistos, dentro desta etiqueta definiremos seu nome por meio do atributo name. Cada op o ser inc luda em uma linha precedida da etiqueta <option>. Podemos ver, a partir destas diretrizes, a forma mais tpic a e simples desta etiqueta: <selec t name="esta o"> <option>Primavera</option> <option>Vero</option> <option>Outono</option> <option>Inverno</option> </selec t> O resultado :
Primavera Esta estrutura pode ser vista modificada princ ipalmente a partir de outros dois atributos: size Indic a o nmero de valores mostrados da lista. O resto pode ser visto por meio da barra lateral de deslocamento. multiple Permite a sele o de mais vrios elementos da lista. A esc olha de mais de um elemento se faz c omo com o explorador de Windows, a partir das tec las ctrl ou shift. Este atributo se expressa sem valor algum, ou seja, no se utiliza c om o igual: simplesmente se c oloc a para c onseguir o efeito, ou no se c oloc a se quisermos uma lista desdobrvel c omum.
Conselho: Se for possvel, no utilize multiple No recomendamos especialmente a prtica desta opo j que o manejo das teclas ctrl ou shift para escolher vrias opes pode ser desconhecido para o navegante. Evidentemente, sempre cabe a possibilidade de explicar como funciona a pesar de ser uma complicao a mais para o visitante.
Vejamos qual o efeito produzido por estes dois atributos mudando a linha: <selec t name="esta o"> por: <selec t name="esta o" size="3" multiple> A lista fic ar desta forma:
Primavera Vero Outono Inverno A etiqueta <option> ainda pode ser precisada por meio de outros atributos
11/10/2010
selected Da mesma forma que multiple, este atributo no toma nenhum valor seno que simplesmente indica que a opo que apresenta est escolhida por padro. Assim, se mudamos a linha do c digo anterior: <option>Outono</option> por: <option selec ted>Outono</option> O resultado ser:
Outono value Define o valor da op o que ser enviada ao programa ou ao correio eletrnic o se o usurio esc olhe essa op o. Este atributo pode ser muito til se o formulrio for enviado a um programa visto que a c ada op o se pode assoc iar um nmero ou letra, o qual torna-se mais facilmente manipulvel que uma palavra ou texto. Poderamos assim esc rever linhas do tipo: <option value="1">Primavera</option> Deste modo, se o usurio escolhe primavera, o que chegar ao programa (ou ao c orreio) uma varivel c hamada estao que ter c om valor 1. No correio eletrnic o rec eberamos: esta o=1 Botes de radio Existe outra alternativa para expor uma escolha, neste c aso, obrigamos ao internauta a escolher unicamente uma das op es que lhe propem. A etiqueta empregada neste c aso <input> na qual teremos a atributo type que temos de tomar o valor radio. Vejamos um exemplo: <input <br> <input <br> <input <br> <input type="radio" name="esta o" value="1">Primavera type="radio" name="esta o" value="2">Vero type="radio" name="esta o" value="3">Outono type="radio" name="esta o" value="4">Inverno
Nota: Temos de observar que a etiqueta <input type="radio"> somente coloca o campo para clicar na pgina. Os textos que aparecem ao lado, assim como as quebras de linha, colocamos com o correspondente texto no cdigo da pgina e com as etiquetas HTML que necessitarmos.
O resultado o seguinte: Primavera Vero Outono Inverno Como podemos ver, a c ada uma das opes se atribui uma etiqueta input dentro da qual atribuimos o mesmo nome (name) para todas as opes e um valor (value) distinto. Se o usurio esc olhe supostamente Outono, rec eberemos em nosso correio uma linha tal como esta:
45/83
11/10/2010
esta o=3 Cabe assinalar que possvel pr-selec ionar por padro uma das op es. Isto se pode c onseguir por meio do atributo checked: <input type="radio" name="esta o" value="2" checked>Vero Vejamos o efeito: Primavera Vero Outono Inverno Caixas de validao Estes tipos de elementos podem ser ativados ou desativados pelo visitante c om um simples clique sobre a c aixa em questo. A sintaxe utilizada muita parecida c om as vistas anteriormente: <input type="c hec kbox" name="paella">Adoro uma feijoada O efeito: Adoro uma feijoada A nic a diferen a fundamental o valor adotado pelo atributo type. Da mesma forma que para os botes de radio, podemos ativar a c aixa por meio do atributo checked. O tipo de informa o que c hegar ao nosso correio (ou ao programa) ser do tipo: feijoada=on (ou off dependendo se tiver sido ativada ou no)
Boto Submit, Apagar Campos e outros em formulrios HTML

Os formulrios tm de dar lugar no somente informa o a tomar do usurio como tambm, a outra srie de fun es. Conc retamente, permite-nos seu envio mediante seu boto. Tambm pode ser prtico poder propor um boto de Apagar Campos ou tambm, acompanh-lo de dados oc ultos que possam ajudar-nos em seu processamento. Neste captulo, para terminar a saga de formulrios, tornaremos c onhec idos os meios de instalar todas estas funes. boto Submit (ou de envio) Para finalizar o proc esso de preenc himento do formulrio e faz- lo c hegar a seu gestor, o navegante tem de valid-lo por meio de um boto previsto para tal efeito. A constru o de tal boto no implic a nenhuma dificuldade uma vez familiarizados com as etiquetas input j vistas: <input type="submit" value="Enviar"> Com este cdigo geramos um boto c omo este:
46/83
11/10/2010
Enviar Como pode ser visto, somente temos de especific ar se trata de um boto de envio (type="submit") e temos de definir a mensagem do boto por meio do atributo value. boto Apagar Campos Este boto nos permitir apagar o formulrio por c ompleto no c aso de que o usurio deseje refaz-lo desde o princ pio. Sua estrutura sinttica igual a anterior: <input type="reset" value="Apagar Campos"> A diferen a do boto de envio, indispensvel em qualquer formulrio, o boto de Apagar Campos meramente optativo e no utilizado freqentemente. H de ter c uidado de no c oloc a- lo muito perto do boto de envio e de distinguir c laramente um do outro. Dados ocultos Em alguns casos, aparte dos prprios dados enviados pelo usurio, pode ser prtic o enviar dados definidos por ns mesmos que ajudem ao programa em seu processamento do formulrio. Estes tipos de dados, que no se mostram na pgina, mas que podem ser detec tados solicitando o c digo fonte, no so freqentemente utilizados por pginas c onstrudas em HTML, so mais usados por pginas que empregam tec nologias de servidor. No se assustem, pois veremos mais adiante o que isto quer dizer. Queremos apenas dar c onstnc ia de sua existncia e de seu modo de c ria o. Como por exemplo: <input type=hidden name="site" value="www.c riarweb.c om"> Esta etiqueta, includa dentro de nosso formulrio, enviar um dado adicional ao correio ou ao programa enc arregado da gesto do formulrio. Poderamos a partir deste dado, tornar c onhec ido ao programa a origem do formulrio ou algum tipo de ao a realizar (um re-endere amento, por exemplo). Botes normais Dentro dos formulrios tambm podemos colocar botes normais, clic veis como qualquer outro boto. Da mesma forma que oc orre c om os c ampos hidden, estes botes por si s no tm muita utilidade, mas poderemos necessita-los para realizar a es no futuro. Sua sintaxe a seguinte: <input type=button value="Texto esc rito no boto"> Fic aria desta maneira: Texto escrito no boto O uso mais frequente de um boto na programa o no cliente. Utilizando linguagens como Javascript podemos definir aes a tomar quando um visitante c lique o boto de uma pgina web. Exemplo de formulrio Com este captulo finalizamos nosso assunto sobre formulrios. Passamos agora a exemplificar todo o aprendido a partir da cria o de um formulrio que c onsulta o grau de satisfao dos usurios de uma linha de nibus fic tcia. O formulrio est c onstrudo para que envie os dados por c orreio eletrnic o a uma c aixa de entrada determinada. Vemos o formulrio nesta pgina. Voc s tratem de constru- lo para ver se realmente entenderam bem os temas sobre formulrios. Nome E-mail @ Cidade
11/10/2010
Sexo Homem Mulher Frequnc ia das viagens Vrias vezes por dia Comentrios sobre sua satisfa o pessoal
Desejo rec eber notific a o das novidades nas linhas de nibus. Enviar formulrio Apagar tudo A seguir tambm mostraremos o c digo fonte deste formulrio, que importante que todos dem uma olhada, mesmo que seja rapidamente.
<form action="mailto:juliana@criarweb.com" method="post" enctype="text/plain"> Nome <input type="text" name="nome" size="30" maxlength="100"> <br> E-mail <input type="text" name="email" size="25" maxlength="100" value="@"> <br> C idade <input type="text" name="cidade" size="20" maxlength="60"> <br> Sexo <br> <input type="radio" name="sexo" value="Masculino" checked> Homem <br> <input type="radio" name="sexo" value="Feminino"> Mulher <br> <br> Frequncia das viagens <br> <select name="utilizao"> <option value="1">Vrias vezes por dia <option value="2">Uma vez por dia <option value="3">Vrias vezes por semana <option value="4">vrias vezes por ms </select> <br> <br> C omentrios sobre sua satisfao pessoal <br> <textarea cols="30" rows="7" name="comentrios"></textarea> <br> <br> <input type="checkbox" name="receber_info" checked> Desejo receber notificao das novidades nas linhas de nibus. <br> <br> <input type="submit" value="Enviar formulrio"> <br> <br> <input type="Reset" value="Apagar tudo"> </form>
Para ac abar, vamos ver o que rec eberiam por c orreio eletrnico na empresa de nibus quando um usurio qualquer preenc hesse este formulrio e c licasse sobre o boto de envio.
11/10/2010
nome=Frederico Silvestre e-mail=fede@terramix.com c idade=Rio de Janeiro sexo=Masculino utiliza o=2 c omentrios=Acho que no uma boa linha. Colocar mais nibus. receber_info=on
Mapas de imagens com HTML

Nos c aptulos anteriores nos aprofundamos no elemento bsic o de navegao do web: O link hipertexto. Vimos que estes links so palavras, textos ou imagens que, ao clic ar sobre eles, nos enviam a outras pginas ou zonas. Os mapas de imagem so uma nova exposio de navega o que inc orpora uma srie de links dentro de uma mesma imagem. Estes links so definidos por figuras geomtric as e funcionam exatamente da mesma forma que os outros links. Pode-se ver o func ionamento de um neste link. princ pio, estes mapas no eram diretamente rec onhec idos pelos navegadores e rec orriam tec nologias de lado do servidor para serem visualizados. Hoje em dia podem ser implementados por meio de c digo HTML tal c omo veremos neste c aptulo. Podemos utilizar estes mapas, por exemplo, em portais onde tornamos conhec ida cada uma das sesses do site por meio de uma imagem. Tambm pode ser muito prtico, em mapas geogrfic os onde cada cidade, estado ou ponto qualquer representa um link a uma pgina. Em qualquer c aso, o uso destes mapas tem de ser sistematic amente ac ompanhado de um texto explic ativo que d a entender ao usurio sobre os distintos pontos da imagem. Frases como "D um c lique sobre tal c one para ac esar a tal informao". So muito indic ativas na hora de fazer intuitiva a navegao pelos mapas de imagens. Por outro lado, no demais introduzir essa mesma explic ao no atributo alt da imagem. Sendo assim, um mapa de imagem est c omposto por duas partes: A imagem propriamente dita que estar situada como de c ostume dentro da etiqueta <body> de nosso doc umento HTML. Um c digo, situado no interior da etiqueta <map>, que delimitar por meio de linhas geomtric as imaginrias c ada uma das reas dos links apresentados na imagem. As linhas geomtric as que delimitan os links, ou seja, as reas dos links, devem ser definidas por meio de c oordenadas. Cada imagem definida por umas dimenses de largura (X) e altura (Y) e c ada ponto da imagem pode ser definido portanto, dizendo a que altura (x) e largura (y) nos enc ontramos. Deste modo, a esquina superior esquerda corresponde posi o 0,0 e a esquina inferior direita c orresponde s c oordenadas X,Y. Se desejamos saber quais c oordenadas correspondem a um ponto c onc reto de nossa imagem, o melhor utilizar um programa de desenho grfic o como Photoshop ou Paint Shop Pro. A melhor forma de explic ar o func ionamento deste tipo de mapa a partir de um exemplo prtico. Suponhamos que temos uma imagem c om um mapa c omo esta:
49/83
11/10/2010
Clique nos crculo s pa ra acessar s sees!
Dentro dela queremos introduzir um link a c ada um dos elementos que a c ompem. Para isso, definiremos nossos links c omo zonas c irculares de tamanho pequeno que sero distribudas ao c omprimento e largura da imagem. Vejamos a seguir o c digo que utilizaremos:
<table border=0 width=450><tr><td align="center"> <map name="mapa1"> <area alt="Clique para ver a pgina de meus amigos" shape="C IRC LE" coords="44,36,29" href="#"> <area alt="Clique para ver minha noiva" shape="C IRC LE" coords="140,35,31" href="#"> <area alt="Clique para conhecer minha famlia" shape="circle" coords="239,37,30" href="#"> <area alt="Clique para conhecer meu trabalho" shape="C IRC LE" coords="336,36,31" href="#"> </map> <img src="../../../../docs/artigos/imagens/mapa1.gif" width="380" height="72" alt="Mapa de imagens. C lique em cada um dos crculos." border="0" usemap="#mapa1"> <br> C lique nos crculos para acessar s sees! </td></tr></table>
Nota: Os href das reas vo a # Este um exemplo parc ial de utiliza o dos mapas, faltaria c oloc ar os href com valores reais e no c om a #. Cada um dos links das reas -atributo href da etiqueta <area>deveriam levar a uma pgina web. O exemplo ficaria completo se c rissemos todas as pginas onde linkar as reas e c oloc ssemos os href dirigidos para tais pginas. Como no fizemos as pginas "destino" c oloc amos links que no levam a lugar nenhum, que, c omo se pode ver, indic a- se c om o c arter "#". possvel observar, tal c omo explicamos antes, que nosso mapa c onsta de duas partes princ ipais: a imagem e a etiqueta <map> que define as reas de c ada link. Cada rea se indic a c om uma etiqueta <area>, que tem os seguinte atributos: alt Para indic ar um texto que ser mostrado quando situarmos o mouse na rea. shape Indic a o tipo de rea. coords As c oordenadas que definem a rea. Ser um grupo de valores numric os distintos dependendo do tipo de rea (shape) que estivermos definindo. href Para indic ar o destino do link c orrespondente rea. Neste caso utilizamos umas reas circ ulares (shape="CIRCLE"), que se definem indic ando o c entro do c rculo -uma c oordenada (X,Y) e o radio, que um nmero inteiro que se corresponde c om o nmero de pixels desde o c entro at a borda do c rculo. Tipos de reas: shape distintas. Existem trs tipos de reas distintas, sufic ientes para fazer quase qualquer tipo de figura. No desenho que ac ompanha estas linhas pode ser visto uma representa o das reas, que detalhamos a seguir.
50/83
11/10/2010
shape="RECT" Cria uma rea retangular. Para defini- la utilizam- se as c oordenadas dos pontos da esquina superior esquerda e da esquina inferior direita. Tal c omo esto nomeadas tais c oordenadas em nosso desenho, a rea teria a seguinte etiqueta: <area shape="RECT" coords="X1,Y1,X2,Y2" href="#"> shape="CIRCLE" Cria uma rea c irc ular, que se indica com a coordenada do centro do c rculo e o radio. De acordo c om nosso desenho, a etiqueta de uma rea c irc ular teria esta forma: <area shape="CIRCLE" coords="X1,Y1,R" href="#"> shape="POLY" Este tipo de rea, poligonal, a mais c omplexa de todas. Um polgono fic a definido indic ando todos seus pontos, mas aten o, pois temos que indic -los em ordem, seguindo o c aminho marc ado pelo permetro do polgono. Segundo nosso desenho e os nomes que demos aos pontos do polgono, a etiqueta <area> fic aria desta forma: <area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">
Frames em HTML
Uma das mais modernas c arac terstic as de HTML so os frames, que foram acresc entados tanto em Netsc ape Navigator c omo em Internet Explorer, a partir de suas verses 2.0. Os frames - que significam em portugus janelas- so uma forma de dividir a pgina em diferentes espaos independentes uns dos outros, de forma que em c ada espa o se c oloc a uma pgina diferente que se c odifica em uma arquivo HTML diferente. princ pio se c riaram como etiquetas proprietrias do navegador Netsc ape e rapidamente a potnc ia do rec urso fez c om que o uso de frames se estendesse por toda a web. Pouco tempo demoraria para Internet Explorer inc lu-los, pois no podia deixar esc apar uma novidade to popular de seu c ompetidor. Finalmente, c omo resposta popularidade entre os desenvolvedores dos frames, o padro HTML 4.0 inc luiu estas etiquetas dentro das permitidas. Os frames, c omo dizamos, nos permitem dividir a janela do navegador em diferentes reas. Cada uma destas reas so independentes e devem ser codific adas c om arquivos HTML tambm independentes. Como resultado, c ada frame ou janela c ontem as propriedades espec ficas que indicamos no c digo HTML apresentado nesse espao. Sendo assim, e dado que c ada janela independente, tero suas prprias barras de desloc amento, horizontais e verticais, separadamente. Existem muitas pginas na web que contm frames e certamente todos j tiveram a oc asio de c onhecer algumas. Costuma se utilizar para c oloc ar em uma parte da janela uma barra de navega o, que geralmente enc ontra- se fixa e permite o acesso a qualquer zona da pgina web. Uma das princ ipais vantagens da programa o com frames vem derivada da independnc ia dos distintos frames, pois podemos navegar pelos contedos de nosso site web c om a barra de navega o sempre visvel, e sem que se tenha que rec arregar em c ada uma das pginas que vamos visitando. Um exemplo das reas que se podem construir em uma c onstruo de frames pode ser visto nas
11/10/2010
imagens a seguir.
Frames Explicao bsica

As pginas web que esto feitas c om frames se c ompem de uma dec lara o das janelas e tantas pginas em formato HTML c orrente como distintas divises tivermos definido. A dec larao ou defini o de frames a nica pgina que realmente devemos aprender, visto que as pginas que sero visualizadas em c ada uma das janelas so arquivos HTML dos que viemos aprendendo anteriormente neste manual. Tal defini o est c omposta por etiquetas <FRAMESET> e <FRAME>, com as quais indic amos a disposi o de todos os quadros. A etiqueta <FRAMESET> indic a as divises da janela do navegador e a etiqueta <FRAME> indica cada um dos quadros onde c oloc aremos uma pgina independente. As parti es que se podem fazer com um <FRAMESET> so em filas ou colunas. Por exemplo, poderamos indicar que desejamos fazer uma diviso da pgina em duas filas, ou duas colunas, trs filas, etc . Para indicar tanto a forma de dividir a janela -em filas ou c olunas- c omo o nmero de parti es que pretendemos fazer, temos de utilizar o atributo COLS ou ROWS. O primeiro serve para indic ar uma parti o em colunas e o segundo para uma parti o em filas.
Nota: importante indicar que no se pode fazer uma partio em filas e colunas de uma vez s, e sim, que devemos escolher em dividir a janela em uma das duas disposies. Mais adiante, indicaremos como dividir a janela tanto em filas como em colunas, que feito com o acrscimo de frames.
No atributo COLS ou ROWS -somente podemos esc olher um dos dois- coloc amos entre aspas o nmero de divises que desejamos realizar, indic ando de antemo o tamanho que vai atribuir a c ada uma. Um valor tpic o destes atributos seria o seguinte: cols="20%,80%" Indic a que devem ser c oloc adas duas c olunas, a da esquerda teria uns 20% do espa o total da janela e a da direita uns 80%. rows="15%,60%,25%" Assim, indic amos que desejamos trs filas, a de c ima com um 15% do espao total, a do meio c om um espa o c orrespondente ao 60% do total e a de abaixo c om um 25%. Ao total somam o 100% do espa o da janela. Alm da porc entagem para indicar o espa o de c ada um dos c ampos, tambm podemos indic - lo em pixels. Desta maneira: cols="200,600" Para indic ar que a c oluna da esquerda deve ter 200 pixels de largura e a da direita 600. Isto est bem se nossa janela tem 800 pixels de largura, mas isto no tem porque ser assim em todos os monitores dos usurios, por isso importante que este modo de expressar as janelas se indique
11/10/2010
da seguinte maneira. cols="200,*" Assim, indic amos que a primeira c oluna tem de medir 200 pixels e que o resto do espao disponvel -que ser maior ou menor dependendo da definio da tela do usurio- se atribuir a segunda c oluna. Na prtica podemos misturar todos estes mtodos para definir as janelas da maneira de desejarmos, c om porcentagem, c om pixels ou com o asterstic o (*). No importa c omo se definem, a nic a rec omenda o que um dos valores que indiquemos seja um asterisc o, para que a rea c orrespondente a tal asterisco seja mais ou menos grande dependendo do espa o que tenha a janela de nosso navegador. Outros mtodos de definir filas e colunas, atendendo a este c onselho, seriam os seguintes: rows="100,*,12%" Definimos trs filas, a primeira com 100 pixels de largura, a segunda com o espao que sobre das outras duas, e a terc eira com um 12% do espao total. cols="10%,50%,120,*" Estamos indic ando quatro c olunas. A primeira de 10% do espao da janela, a segunda c om a metade justa da janela, a terceira com um espao de 120 pixels e a ltima com a quantidade de espao que sobre ao atribuir espao s demais parties. Uma vez indicado o nmero de filas ou c olunas e o espa o reservado a cada uma c om a etiqueta <FRAMESET>, devemos espec ific ar com a etiqueta <FRAME> a proc ednc ia de c ada um dos frames que dividimos a janela. Para isso, dispomos do atributo SRC, que tem de ser definido para c ada uma das filas ou c olunas. Desta maneira. <FRAME src="janela1.html"> Assim fic a indic ado que o frame que estamos definindo deve mostrar a pgina janela1.html em seu interior.
Frames Criao de uma estrutura simples

Para ilustrar tudo o que viemos explicando podemos ver o exemplo sobre c omo se c riaria a defini o de frames da imagem que podemos ver a seguir.
<html> <head> <title>Defini o de Frames</title> </head> <frameset rows="15%,*,75">

11/10/2010
<frame src="pagina1.html"> <frame src="pagina2.html"> <frame src="pagina3.html"> </frameset> </html> Pode-se ver esta partio de frames em uma pgina a parte. Alm disso, temos algumas considera es a fazer para terminar de c ompreender este exemplo: O ttulo da defini o de frames o que herda toda a pgina web, por isso, no boa idia titular c omo "definio de frames" por exemplo, j que ento toda nossa pgina se titularia assim e c ertamente no seria muito desc ritivo. Se estivssemos fazendo uma pgina para o a ougue Gon alves seria melhor titular a definio de frames algo c omo "A ougue Gon alves, as melhores carnes no Rio de Janeiro". A pgina que define os frames no tem body. O HTML pode totalizar um erro se o inc luirmos. As pginas "pagina1.html", "pagina2.html" e "pagina3.html" devem ser esc ritas em arquivos independentes c om o nome indic ado. Neste exemplo, Tais pginas deveriam se enc ontrar no mesmo diretrio que a declara o de frames. Se espec ificarmos uma rota para ac essar ao arquivo podemos c oloc - lo no diretrio que desejarmos. As cores de c ada um dos frames colocamos c om o atributo bgc olor c oloc ado na etiqueta <BODY> de c ada uma das pginas que se mostram nas janelas.
Frames Uma pgina em cada moldura

As pginas que mostraremos em c ada moldura so documentos HTML iguais aos que viemos c riando anteriormente. Podemos c oloc ar qualquer elemento HTML dos estudados neste manual, c omo etiquetas de pargrafo, imagens, cores de fundo, etc . Cada doc umento, c omo j indicamos, se esc reve separado em seu prprio arquivo HTML. Para o exemplo do c aptulo anterior podemos definir os arquivos HTML da seguinte maneira. pagina1.html a pgina que c ontm o ttulo da web. Simplesmente se trata de uma etiqueta <H1> de ttulo. A pgina tem seu prprio ttulo, com a etiqueta <TITLE>, que no poder ser visualizada nenhum lugar, a no ser que se mostre esta pgina sem os frames, j que as pginas dentro das janelas herdam o ttulo da definio dos frames. <html> <head> <title>Ttulo A ougue Gon alves</title> </head> <body bgc olor="#DECC09"> <h1 align=c enter>A ougue Gon alves</h1> </body> </html> pagina2.html a pgina que se apresentar na rea princ ipal da defini o de frames, ou seja, a pgina que tem mais espao para ser visualizada e onde c oloc aremos os c ontedos da web. Neste c aso, mostra uma mensagem de bem-vindo web, que far as vezes de portal.
54/83
11/10/2010
<html> <head> <title>Portal do Aougue Gon alves</title> </head> <body bgc olor="#CF391C" text="#ffffff"> <h1 align="center">Bem-vindo a nossa web</h1> <br> <br> O a ougue Gonalves, c om mais de 100 anos de experinc ia, a melhor fonte de carnes de boi e de porc o da regio. <br> <br> Tanto no inverno c omo no vero voc pode enc ontrar nossas ofertas de temporada de primeira qualidade. </body> </html> pagina3.html Nesta pgina se mostrar a barra de navega o pelos c ontedos do site. Contm links que deveriam atualizar o c ontedo da rea princ ipal da dec larao de frames, para mostrar os distintos contedos do sitio, por exemplo, o portal, os produtos, a pgina de c ontato, etc . <html> <head> <title>Barra de navega o de a ougue Gon alves</title> </head> <body bgc olor="#AC760E" link="ffffc c " vlink="ffffc c"> <div align="center"> <b> <a href="pagina2.html">Portal</a> | <a href="produtos.html">Produtos</a> | <a href="c ontato.html">Contato</a> </b> </div> </body> </html> Podemos ver como fica a pgina de frames c om estes c ontedos, que simulam a pgina de um a ougue.
Frames Orientar os links

A nic a partic ularidade destac vel no exemplo do captulo anterior, no manejo de frames em geral, trata-se de que cada um dos links que colocamos nas pginas atualizam o frame onde est colocado este link. Por exemplo, se temos link na parte inferior da janela, no espa o c orrespondente a terceira janela, atualizaro os c ontedos do terc eiro frame, que onde esto situados os links. Este efeito que c omentamos pode-se observar no exemplo da pgina do a ougue, tal como fic aria ao inc luir os c digos das distintas pginas. O lgico que ao c lic ar sobre um link da barra de navega o atualizamos o frame princ ipal, que onde havamos planejado c oloc ar os c ontedos, no lugar do frame onde c oloc amos a barra de navega o, que deveria se manter fixa. Para c onseguir este efeito devemos fazer duas coisas:
11/10/2010
1. Dar um nome ao frame que desejamos atualizar Tal nome se indic a na etiqueta <FRAME> da defini o de frames. Para isso utilizamos o atributo name, igualado ao nome que queremos dar a tal janela. 2. Orientar os links para esse frame Para isso devemos colocar no atributo target dos links - etiqueta <A>- o nome do frame que desejamos atualizar ao c licar o link. Depois de dar um nome ao frame principal, nossa declara o de frames fic aria da seguinte maneira. <frameset rows="15%,*,75"> <frame src="pagina1.html"> <frame src="pagina2.html" name="princ ipal"> <frame src="pagina3.html"> </frameset> Ademais, deveramos colocar o atributo target aos links, tal como se segue. <a href="pagina2.html" target="princ ipal">Portal</a> | <a href="produtos.html" target="princ ipal">Produtos</a> | <a href="c ontato.html" target="princ ipal">Contato</a> Uma vez realizados estas duas mudan as podemos ver c omo os links da barra de navegao sim que atualizam a pgina que devem. Valores para o atributo target Como vimos, c om o atributo target da etiqueta <A> podemos indic ar o nome do frame que desejamos que atualize esse link. Entretanto, este no o nic o valor que podemos aplic ar ao atributo. Temos alguns valores adicionais que podemos atribuir a qualquer link em geral. _blank Para fazer c om que esse link se abra em uma janela a parte. Nossos exemplos neste manual c ostumam abrir em uma janela a parte, colocando este valor no target dos links que levam aos exemplos. _self Atualiza o frame onde est situado o link. o valor por padro. _parent O link se atualiza sobre seu pai ou sobre a janela que estamos trabalhando, se no tiver um pai. _top A pgina c arrega a tela c ompleta, ou seja, eliminando todos os frames que pudesse haver. Este atributo muito importante porque se c oloc amos em nossa pgina c om frames um link a uma pgina externa, se abriria em um dos frames e se manteriam visveis outros frames da pgina, fazendo um efeito que c ostuma ser pouc o agradvel, porque parec e que esto evitando que nos esc apemos. A sintaxe de um desses valores de atributos c oloc ados em um link seria a seguinte: <A href="http://www.c riarweb.c om" target="_top">Ac essar a c riarweb.com</A>
Frames Aninhar frames

Para criar estruturas de janelas nas quais se misturam as filas e as colunas devemos aninhar etiquetas <FRAMESET>. Comeando pela parti o de frames mais geral, devemos c oloc ar dentro
11/10/2010
as parti es de frames menores. A maneira de indicar isto se pode ver facilmente com um exemplo.
Os passos para definir o aninhamento podem ser encontrados direita. Os distintos frames vem numerados com a ordem na qual so escritas no cdigo.
Na imagem pode ser visto o resultado final acompanhada da representa o sobre a maneira de defini-los. Em primeiro definimos uma estrutura de frames em duas c olunas e dentro da primeira c oluna c oloc amos outra parti o de frames em duas filas. O c digo necessrio o seguinte. <frameset c ols="200,*"> <frameset rows="170,*"> <frame src="pagina1.html"> <frame src="pagina2.html"> </frameset> <frame src="pagina3.html"> </frameset> Podemos ver o exemplo em uma pgina a parte.
Nota: colocamos uma margem em cada uma das linhas desta definio de frames para conseguir um cdigo mais compreensvel visualmente. Estas margens no so em absoluto necessrios, simplesmente nos servem para ver em que nvel de aninhamento nos encontramos.
O exemplo anterior pode se c omplic ar um pouc o mais se inc luirmos mais parties. Vamos ver algo um pouc o mais c omplic ado para pratic ar mais c om os aninhamentos de frames.
Os passos para definir o aninhamento podem ser encontrados direita. Os distintos frames vem numerados com a ordem na qual se escrevem no cdigo.
Na imagem se observa que o primeiro frameset a definir se c ompe de duas filas. Posteriormente, dentro da segunda fila do primeiro frameset, temos outra parti o em duas c olunas, dentro das que c oloc amos um terceiro nvel de frameset c om uma defin o em filas nos dois c asos. O c digo pode ser visto a seguir. <frameset rows="60,*"> <frame src="pagina1.html"> <frameset cols="200,*"> <frameset rows="*,150">
11/10/2010
<frame src="pagina2.html"> <frame src="pagina3.html"> </frameset> <frameset rows="*,60"> <frame src="pagina4.html"> <frame src="pagina5.html"> </frameset> </frameset> </frameset> Podemos ver o exemplo em uma pgina a parte. At aqui vimos a parte mais bsic a da c ria o de frames. Nos prximos captulos poderemos aprender a c onfigurar as janelas para variar sua aparncia e, entre outras c oisas, eliminar as barras que separam c ada um dos distintos frames.
Frames Atributos avanados

A parte da c ria o das janelas propriamente dita, existem muitos atributos com os que configurar sua aparnc ia. Para isso, tanto a etiqueta <frameset> c omo <frame> admitem diversos atributos que permitem especific ar a forma de elementos como as bordas dos frames, a margem, a existnc ia ou no de barras de deslocamento, etc. Atributos para a etiqueta <frameset> J conhec emos o atributo cols e rows, que servem para indic ar se a distribu o em janelas se far horizontalmente ou vertic almente. Somente se pode utilizar um deles e se iguala s dimenses de c ada uma das divises, separadas por vrgulas. border="nmero de pixels" Permite espec ificar de maneira global para todo o frameset o nmero de pixels que h de ter a borde dos frames. bordercolor="#rrggbb" Com este atributo podemos modificar a cor da borda dos frames, tambm de maneira global a todo o frameset. frameborder="yes|no|0" Serve para mostrar ou no a borda do frame. Seus possveis valores so "yes" (para que se vejam as bordas) e "no" ou "0" (para que no se vejam). Na prtic a elimina a borda, mas permanec e uma linha de separa o dos frames. framespacing="nmero de pixels" Para determinar a largura da linha de separa o dos frames. Pode - se utilizar em Internet Explorer e junto com o atributo frameborder="0" serve para eliminar a borda das janelas. Atributos para a etiqueta <frame> Para esta etiqueta, assinalamos nos c aptulos anteriores os atributos src, que servem para indicar o arquivo que contm a janela e name, para dar um nome janela e logo direc ionar os links para ele. Vejamos agora outros atributos disponveis. marginwidth="nmero de pixels" Define o nmero de pixels que tem a margem do frame onde se indic a. Esta margem se aplica pgina que pretendemos ver nessa janela, de modo que se c oloc amos 0, os c ontedos da pgina nessa janela estaro c ompletamente grudados na borda da margem e se indic amos um valor de
11/10/2010
10, os contedos da pgina estariam separados da borda 10 pixels. marginheight="nmero de pixels" O mesmo que o atributo anterior, mas para a margem vertic al. scrolling="yes|no|auto" Serve para indic ar se queremos que haja barras de deslocamento nas diferentes janelas. Se indicamos "yes" sempre sairo as barras, se indic amos "no" no sairo nunca e se colocamos "auto" sairo somente se forem necessrias. Auto o valor por padro.
Conselho: H que ter cuidado se eliminamos as bordas dos frames, visto que a a pgina web pode ter dimenses distintas dependendo da definio de tela do visitante. Se o espao da janela se v reducido, poderia se ver reduzido o espao para o frame e pode acontecer de no caber os elementos que antes sim cabiam e se eliminamos as barras de deslocamento pode ser que o visitante no possa ver todo o contedo da janela. Este mesmo conselho pode ser aplicado ao redimensionamento de frames, que veremos no seguinte atributo. Se fizermos com que as janelas no sejam redimensionveis provavelmente teramos uma declarao de frames demasiado rgida, que pode ser mal vista em algum tipo de tela.
noresize Este atributo no tem valores, simplesmente se c oloc a ou no se c oloc a. No c aso de que esteja presente indic a que o frame no se pode redimensionar. Como podemos ver, ao c oloc ar o mouse sobre a borda das janelas sai um cursor que nos assinala que podemos mover tal borda e redimensionar assim os frames. Por padro, se no colocamos nada, as janelas podem ser redimensionadas. frameborder="yes|no|0" Este atributo permite c ontrolar a apari o das bordas dos frames. Com este atributo igualado a "0" ou "no" as bordeas se eliminam. Entretanto, ficam as feias margens na borda. Pelo que podemos c omprovar funciona melhor no Netscape do que no Internet Explorer. De qualquer forma, temos um pouc o mais adiante, uma nota para explicar os frames sem bordas.
Nota: os atributos de frames no funcionam sempre bem em todos os navegadores. recomendvel fazermos um teste sobre o que estamos desenhando em vrios navegadores para comprovar que nosos frames se vem bem em todas as plataformas.
bordercolor="#rrggbb" Permite espec ificar a cor da borda da janela.

Vantagens e incovenientes do uso de frames

O desenho c om frames um assunto bastante c ontrovertido, j que distintos desenhadores podem ter outras opinies.
Referncia: Se voc deseja saber o que so os frames e como cri-los consulte os captulos de Frames de nosso manual de HTML.
No meu c aso, penso que prefervel no utiliz- los, apesar de que isso depende do tipo de web site que esteja construindo, pois em alguns c asos sim que seria muito adequado seu uso. Colocarei algumas vantagens e alguns inc onvenientes deo uso de janelas (frames). Isto ao meu ponto de vista, outros podem ter outras opinies. Vantagens de usar frames A navega o da pgina ser mais rpida. Apesar de que o primeiro c aerregamento da pgina seria igual, em sucessivas impresses pginas j teremos algumas janelas salvas,
11/10/2010
que no teriam que voltar a descarregar. Criar pginas do site seria mais rpido. Como no temos que inc luir partes de c digo c omo a barra de navega o, ttulo, etc. criar novas pginas seria um processo muito mais rpido. Partes da pgina (c omo a barra de navega o) se mantm fixas e isso pode ser bom, para que o usurio no as perc a nunca de vista. Estas mesmas partes visveis constantemente, se c ontm links, podem servir muito bem para melhorar a navega o pelo site. Mantm uma navegabilidade do site onde se navega, pois os elementos fixos conservam a imagem sempre visvel. Inconvenientes de usar frames Tiram espa o da tela. O espa o ocupado pelos frames fixos se perde na hora de fazer pginas novas, porque j est utilizado. Em definies de tela pequena ou em dispositivos como Palms, este problema se torna mais patente. Foram ao visitante a entrar pela declara o de frames. Se no o fazem assim, somente se veria una pgina interior sem os requadros. Estes requadros poderian ser insufic ientes para uma boa navegao pelos c ontedos e poderiam no conservar uma boa imagem corporativa. A promo o da pgina seria, princpio, mais limitada. Isto devido a que somente se deveria promoc ioanr o portal, pois se se promoc ionam pginas interiores, poderia ac ontec er o c aso em que os visitantes entrassem por elas no lugar do portal, criando o problema desc rito no ponto anterior. Muita gente no gosta porque no se sentem livers na navega o, pois entendem que estas partes fixas esto limitando sua mobilidade pela web. Este efeito se torna mais patente se a pgina c om frames tem links a outras pginas web fora do site e, ao c lic ar um link, se mostra a pgina nova c om as janelas da pgina que tem frames. Alguns navegadores no os suportam. Isto no muito habitual, mas se estamos fazendo uma pgina que queremos que seja totalmente ac essivel deveramos c onsider- lo importante. Os bookmarks ou favoritos no funcionam corretamente em muitos c asos. Se quisermos inc luir um favorito a uma pgina de um frame que no seja o portal podemos enc ontrar problemas. Pode ac ontec er que o boto detrs do navegador no se c omporte c omo desejamos. Se voc quer atualizar mais de um frame com o c lique de um link dever utilizar Javascript. Ademais os sc ripts podem se c omplic ar bastante quando tm de c omunic ar vrios frames entre si. Concluso O trabalho com frames pode ser mais ou menos indic ado dependendo das carac tersticas da pgina a desenvolver, sua tarefa saber se no seu caso deve utiliza-los ou no.
As etiquetas de HTML 4.0

Introdu o. Quando Internet c omeava sua inc ontrolvel escalada, a verso padro HTML que c irculava era a 2.0, o qual continua suportando os navegadores mais atuais. Porm, as ferramentas de que se dispunha no oferec ia um c ontrole prec iso dos doc umentos.
11/10/2010
Contudo, como at ento o objetivo da Internet estava fundamentalmente orientado ao mbito ac admic o e no ao de design, no se deu muita importnc ia questo de lan ar uma verso melhorada do padro at que Netsc ape, que at ento era a empresa lder no setor, tomou a inic iativa de incluir novas etiquetas pensadas para melhorar o aspec to visual das pginas web. Por este motivo o IETF (Internet Engineering Task Forc e) ou o que o mesmo, Grupo de Trabalho em Engenharia de Internet, c ome ou a elaborar novos padres, os quais deram c omo fruto o HTML 3.0, que resultou ser grande demais para as infra-estruturas que havia nesse momento, o qual dific ultou sua ac eita o. Sendo assim, uma srie de c ompanhias (entre as que estavam Netsc ape, Sun Mic rosystems ou Mic rosoft, entre outras), se uniram para c riar o que hoje se denomina W3C (ou o que o mesmo, Consorc io para a World Wide Web), que foi fundado em outubro de 1.994 para c onduzir World Wide Web ao seu mximo potenc ial, desenvolvendo protoc olos de uso comum, para normalizar o uso da web em todo o mundo. O c ompromisso do W3C de encaminhar Web ao seu mximo potencial inc lui promover um alto grau de ac essibilidade para as pessoas c om deficinc ias. O grupo de trabalho permanente Web Ac c essibility Initiative (WAI, Inic iativa para a Acessibilidade da Rede), em c oordenao c om organizaes ao redor de todo o mundo, persegue a ac essibilidade da Web atravs de c inco reas de trabalho principais: Tec nologia, diretrizes, ferramentas, forma o, difuso, e investiga o e desenvolvimento. Desta inic iativa nasc eu o rascunho de HTML 3.2 e em sua verso definitiva se introduziram mudanas essenc iais para as possibilidades que os navegadores c ome avam a oferec er, estas inc luses foram as tabelas, os applets, etc . Em julho de 1.997 nasce o rascunho do HTML 4.0 e finalmente se aprova em dezembro de 1.997 este padro incluindo como melhorias os frames, as folhas de estilo e a incluso de scripts em pginas web, entre outras coisas.
As etiquetas de HTML 4.0 (1)

Entre o padro do HTML 3.2 a 4.0 se introduziram novas etiquetas das quais daremos uma breve explic a o. <Q>... </Q> As etiquetas <Q> e </Q> agem de forma muito parecida a <BLOCKQUOTE> porm c om a partic ularidade de que se adiciona uma margem em pargrafos menores e sem a necessidade de romper o pargrafo. Segundo, o W3C, a etiqueta <BLOCKQUOTE> para adicionar margens largas e <Q>, para margens menores, sem nec essidade de romper o pargrafo.
Nota: No HTML 4.0 imprescindvel colocar a etiqueta de abertura e a de fechamento <Q>.... </Q>.
<ACRONYM>... </ACRONYM> As etiquetas <ACRONYM>... </ACRONYM>, indicam que h um ac rnimo no texto. Um acrnimo um pequeno texto que ajuda a explicar a estrutura do texto uma frase. <INS>... </INS> e <DEL>... </DEL>
11/10/2010
Utilize < INS>...</INS> para marc ar as partes de um doc umento que foi agregado pela verso passada do doc umento. <DEL>... </ DEL> marc a de maneira similar um texto de um documento que se foi suprimido pela verso anterior. <COLGROUP>... </COLGROUP> Utiliza- se para ter um melhor c ontrole sobre um o formato das tabelas espec ific ando as c arac terstic as que c ompartilham c omo: largura, altura e alinhamento. Cada tabela deve ter pelo menos um <COLGROUP>; sem especific ar nenhuma carac terstica de < COLGROUP >. HTML 4.0 assume que uma tabela c ontm um s grupo de c olunas e que este c ontm todas as colunas de uma tabela. Por exemplo, isto nos serviria para c riar uma tabela c om uma c lula na que pode se incluir uma desc ri o e depois seguido de check boxes para selec ionar as op es desejadas. Cdigo: <TABLE> <C OLGROUP span="10" width="30"> <COLGROUP span="1" width="0*"> <THEAD> <TR>... </ TABLE> Desta forma, <COLGROUP> proporciona um formato mais agradvel aos check boxes sem a necessidade de espec ific ar, propriedades idntic as para c ada fila. A etiqueta de inc io < COLGROUP >, requer outra de fec hamento. Com o qual obtemos: (em Nestc ape s se ver a tabela, no o boto).
As etiquetas de HTML 4.0 (2)

<FIELDSET>... </FIELDSET> At agora, no dispnhamos de nenhuma maneira de agrupar visualmente vrios c ontroles, se no aproveitssemos elementos que no so do formulrio, c omo tabelas ou imagens. Agora, se fec hamos uma parte de um formulrio dentro da etiqueta FIELDSET se mostrar um retngulo ao redor dos mesmos. Ademais, podemos indic ar um ttulo por meio da etiqueta LEGEND, que admite o parmetro align="left / c enter / right / top / bottom", o que nos permite alinhar o ttulo horizontal e vertic almente. O nico problema que deveremos introduzir o c onjunto em uma c lula de tabela com uma largura determinado, j que se no fizermos assim a moldura abarcar toda a largura de tela disponvel. Exemplo.- (S para I. Explorer)
<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="meuform"> <table width="200"> <tr> <td> <fieldset> <legend align="left"><font color="red">C aixa de texto</font></legend> C oloque seu nome: <input type="text" size="15"> </fieldset> </td> </tr> <table> </form>
<LABEL>... </LABEL> At pouco tempo atrs os c ampos de entrada no estavam associados a eles mesmos. Por exemplo; na hora de clic ar sobre um c ampo de c onfirmao, no ac ontecia nada! Porm agora, se o clic armos o controle mudar de estado.
62/83
11/10/2010
Exemplo:
<form action="cgi-bin/meucontrol.exe" method="post" enctype="text/plain" name="mais um exemplo"> <label> <input type="checkbox" name="email"> Desejamos um feliz ano novo </label> </form>
<BUTTON>... </BUTTON> A partir da implementao dos padres HTML 4.0 contamos c om vrias etiquetas novas para c onstruir formulrios, sendo BUTTON uma delas, alis, bastante. O problema que as verses de 4 de Nestcape foram lan adas antes destas implementa es, por isso estas etiquetas s podem ser visualizadas c orretamente c om Internet Explorer 4 e superiores. Esta etiqueta proporc iona um mtodo nico para a implementao de qualquer tipo de boto de formulrio. Seus princ ipais atributos so: type= " tipo ", que pode tomar os j conhec idos valores submit (por padro), reset e button. name= " nome ", que atribui um nome identific ador nic o ao boto. value= " texto ", que define o texto que vai aparecer no boto.
A princ ipal vantagem que traz estas etiquetas que agora vamos poder introduzir dentro delas qualquer elemento de HTML, c omo imagens e tabelas. Exemplos.
<form action="cgi-bin/control.exe" method="post" enctype="text/plain" name="meuform"> <button name="boton_1" type="button"> <table width="10" cellspacing="0" cellpadding="2" border="1"> <tr> <td>um</td> <td>dois</td> </tr> <tr> <td>trs</td> <td>quatro</td> </tr> </table> </button> </form> Informe de Luciano Moreno
udio em HTML I, introduo

Em sua curta, porm rpida vida, as pginas web passaram a ser no s uns meros doc umentos textuais aos que se podem acessar pela Internet, mas c omo umas verdadeiras apresenta es multimdia, que c ombinam textos c om imagens, udios, vdeos e elementos de realidade virtual. Se o primeiro passo que se deu foi adicionar imagens s pginas web (tanto esttic as como dinmic as GIF animados), o seguinte passo c onsistiu em introduzir udios nas mesmas, c onseguindo c om eles o apelativo de "multimdia". E nos referiremos daqui por diante quando falarmos de udio tanto sintetizado c omo verdadeiras gravaes de udio, de qualidade muito elevada. Entretanto, apesar dos navegadores terem sido capazes de interpretar os arquivos de udio
11/10/2010
adequados desde j algumas verses, verdade que a aplica o de udios s pginas web sempre esteve limitada pela largura de banda necessria nas c onexes a Internet para poder baixar de forma adequada tais arquivos, devido ao tamanho "excessivo" dos mesmos. Outra das limitaes importantes que enc ontramos na hora de inc luir arquivos de udio em nossas pginas a diferente implementao que fazem deles os navegadores web mais usados. Teoric amente, no s deveremos usar etiquetas HTML distintas para Internet Explorer que para Netsc ape Navigator, como tambm que s vezes a prpria forma de interpretar o udio pode diferir de um ao outro navegador. Finalmente, h que destac ar que na hora de inc luir arquivos de udio em nossas pginas devemos ser consc ientes que muitos dos formatos usados, sobretudo em grava es de qualidade, precisam um plugin ou programa especial para sua reproduo no navegador cliente. E se verdade que atualmente h c ertos plugins que se transformaram quase que em um padro na Internet (como o de Real Audio ou o de MP3), h outros possveis que no normal ter instalado, portanto se inc luirmos arquivos deste tipo obrigaremos ao usurio a ter que instal-los, c oisa que as pessoas c ostuma ter resistncia.
Informe de Luciano Moreno
udio em HTML II, caractersticas do udio digital

Vamos estudar alguns dos c onc eitos bsicos do udio digital, embora sem entrar em demasiadas c onsidera es tcnic as. Para aqueles que desejarem mais informa o, existem uma infinidade de web sites que estudam espec ific amente o udio digital e o hardware necessrio para sua captura e reprodu o. O udio tem uma natureza ondulante, ou seja, se propaga em forma de ondas analgic as desde o objeto que o produz. As carac terstic as prprias de qualquer udio (desde o produzido por um automvel at uma bela cano), seus diferentes tons e notas dependem prec isamente das propriedades fsicas das ondas que o formam. Para poder viajar desde o emissor ao rec eptor, as ondas de udio prec isam de um meio fsic o de suporte, seja o ar da atmosfera, a gua, etc . Tanto assim que no espa o exterior, onde no h meio fsic o de suporte, no se podem transmitir udios. Se representarmos em um grfico um udio complexo, obteremos a seguinte figura:
Na qual podemos apreciar os diferentes valores de onda que vai tomando o udio. Todos ns sabemos que as mquinas informtic as no trabalham c om dados analgic os, e sim, que trabalham c om dados digitais, formados por estados binrios. Portanto, para representar um udio, desde o ponto de vista informtic o, prec iso c aptur- lo em uma natureza binria, para que se fa a uma amostra do mesmo, tomando determinados valores das ondas e representando tais valores em formato digital. Em cada c aptura obteremos um ponto do grfico anterior.
64/83
11/10/2010
Porm, quantas amostras deveremos tomar? Este o verdadeiro miolo da questo, j que quantas mais amostras tomarmos, mais fiel ser o udio c apturado c om respeito ao original, c om o que ter mais qualidade. Para medir o nmero de capturas utilizamos a freqnc ia da amostra. Como um Herz um c ic lo por segundo, a freqnc ia de uma captura em Herz representa o nmero de c apturas que realizamos em um segundo. Assim, uma frequncia de amostra de 20 KHz (20 Kilo Herz = 20000 Herz) realizar 20000 c apturas de pontos cada segundo. O ouvido humano c aptar de captar a assombrosa quantidade de 44000 udios por segundo, ou seja, 44 KHz. Portanto, para que um udio digital tenha sufic iente qualidade dever estar baseado em uma frequnc ia similar a esta. Em geral, o valor padro de c aptura de udios de qualidade de 44,1 Khz (qualidade CD), embora haja capturadoras de udio profissionais que c hegam at os 100 Khz, c om objeto de obter um maior nmero de pontos sobre a amostra, c onseguindo uma qualidade mxima. Outro c onc eito do que j devem ter ouvido falar sobre o udio digital o nmero de bits de um c arto de udio. A origem desta magnitude que, na hora de c apturar o udio, no s importante o nmero de amostras tomadas, como tambm a quantidade de informao c apturada em c ada uma dessas amostras. Uma vez capturado o udio, para sua posterior reprodu o em uma mquina informtic a necessrio mandar uma srie de impulsos ou posies aos alto-falantes para que c riem o udio a partir deles. Como? Bom, produzindo a partir dessas posi es movimentos das membranas dos alto-falantes, movimentos que transformam de novo o udio digital em analgic o, estado no qual capaz de viajar pelo ar e produzir os estmulos nec essrios em nossos tmpanos, c om o qual somos capazes de perc eber o udio "original". Quantas mais posi es de informao se enviem aos alto-falantes, melhor a qualidade ter o udio reproduzido. Com estas bases, se define o nmero de bits de um udio digital c omo o nmero de impulsos de informa o (posi es) que se enviam aos alto-falantes para sua transforma o em ondas analgicas. Os cartes de udio atuais trabalham normalmente c om 8 bits de informao, c om os que se podem obter 28=256 posi es (zeros e uns binrios), embora haja algumas de melhor qualidade que so c apazes de trabalhar com c apturas de 16 bits, que originam 216 = 65536 posi es de informa o. Como dado de referncia, os CDs atuais esto baseados em udio gravado a 44 Khz e c om um tamanho de amostra de 16 bits. Estas medidas se conhecem c om o nome de udio de qualidade CD. Por ltimo, uma vez que o udio digital chega aos nossos ouvidos, impac tam contra os tmpanos, verdadeiras membranas especializadas que voltam a transformar as ondas analgic as em impulsos eltric os, que viajam at nosso c rebro, onde so interpretados e produzem as sensaes auditivas que todos ns c onhecemos. Uma exc eo ao udio anteriormente desc rito, que podemos denominar "de dados de udio", o udio sintetizado, o qual no se realiza nenhuma captura de ondas sonoras reais, e sim que udio totalmente digital, gerado diretamente na mquina informtic a pelo reprodutor digital c onhecido pelo nome de MIDI (Music Instrument Digital Interface). Quando se deseja reproduzir
11/10/2010
uma nota music al c onc reta, se envia um comando MIDI ao c hip sintetizador, que se enc arrega de traduzir esse c omando em uma vibra o espec ial que produz a nota. Mediante este sistema possvel c riar melodias bastante ac eitveis, embora nunca tenham a qualidade, nem a riqueza de uma onda sonora natural c apturada.
udio em HTML (III)

Formatos de udio Na hora de inc luir arquivos de udios em nossas pginas web devemos distinguir entre os que podem ser diretamente exec utados pelo navegador e aqueles que devem ser abertos por um programa prprio, que dever ter o usurio instalado em sua mquina para poder reproduzir o arquivo. De forma geral, podemos inc luir na web os seguintes tipos de arquivos de udio. WAV (Wave form Audio File format): formato tpic o da casa Windows, de elevada qualidade, usado nas grava es de CDs, que trabalha a 44 Khz e a 16 bits. Consta basic amente de trs bloc os: o de identific ao, o que espec ific a os parmetros do formato e o que contm as amostras. Seu princ ipal inconveniente o elevado peso dos arquivos, pelo qual seu uso fic a limitado na Internet reprodu o de rudos ou frases c urtas. A extenso destes arquivos .wav. suportado por Internet Explorer e Netsc ape 4x. AU (Audio File format): formato criado pela c asa Apple para plataformas MAC, c ujos arquivos se salvam com a extenso .au MIDI formato de tabela de ondas, que no salvam o udio a reproduzir, e sim um cdigo que nosso c arto de udio ter que interpretar. Por isso, este tipo de arquivos no pode armazenar udios reais, c omo vozes ou msic a gravada; s pode conter udios armazenveis em tabelas de ondas. Como c ontrapartida, os arquivos MIDI, que se salvam com extenso .mid, so de pequeno tamanho, o que os torna ideais para a web. suportado pelo Internet Explorer e Netsc ape 4x. MP3 (MPEG 1 Layer 3): desenvolvido pelo MPEG (Moving Pic ture Expert Group), obtm uma alta compresso do udio e uma muito boa qualidade na elimina o dos componentes do udio que no estejam entre 20 hz e 16 Kh (os que pode ouvir o ser humano normal). Tenha em cota o udio envolvente (surround) e a extenso multilinge, e salve os arquivos com a extenso .mp3, e permite c onfigurar o nvel de c ompreenso, c onseguindo-se qualidade similares s do formato WAVE, porm com at 10 vezes menos tamanho de arquivo. suportado diretamente somente pelo Internet Explorer 5.5 e superiores. MOD espc ie de mistura entre o formato MIDI e o formato WAV, j que por um lado armazena o udio em forma de instrues para o c arto de udio, porm por outro pode armazenar tambm udios de instrumentos music ais digitalizados, podendo ser interpretados por qualquer c arto de udio de 8 bits. No um formato padro de Windows, por isso seu uso mais indicado para sistemas Mac , Amiga ou Linux. A extenso dos arquivos .mod -Law Format de qualidade similar ao formato WAV, original das mquinas NeXt, e salva seus arquivos c om a extenso .au
66/83
11/10/2010
Real Audio de qualidade mdia, embora permita arquivos muito c omprimidos, que salva c om extenso .rmp ou .ra. Para sua reproduo necessita-se ter instalado o plugin Real Audio. Na hora de trabalhar c om estes formatos de udio, deveremos ter em c onta as limita es em seu uso, j que muitos deles no podem ser reduzidos mais que em sistemas operacionais c onc retos, e ainda assim, c om plugins ou programas especfic os. Em busc a da compatibilidade, se usamos Windows como sistema operacional convm usar para arquivos musicais a reproduzir diretamente no navegador os formatos WAV e MIDI, que so os mais compatveis. Em troca, se o que desejamos poder oferecer a nossos visitantes a op o de navegar c om msic a exec utvel atravs de um programa externo, o melhor usar arquivos em formato MP3, j que na atualidade a maioria dos navegantes tm instalado em sua mquina algum programa reprodutor adequado, podendo valer desde software includo em Windows, c omo Windows Media Player, at aplic a es externas, c omo Winamp. Neste c aso, basta colocar um link normal em nossas pginas, apontando ao arquivo de udio. Como exemplo, se quisermos linkar em nossa pgina um arquivo MP3, bastaria esc rever: <a href="audios/mp3.mp3" target="_blank"> Clique aqui para ouvir a msic a. </a> Que nos daria: Clique aqui para ouvir a msic a Com isto, o usurio ao c licar o link, se lanar a aplic ao que tiver assoc iada com o tipo de arquivo MP3, que depender da c onfigura o interna de cada navegador e usurio. Um caso especial Netsc ape 6x. Quase no admite diretamente nenhum tipo de formato de udio inc rustado na pgina, ao no vir configuradas por padro as aplic aes ou plugins nec essrios. E no c aso de arquivos linkados, Nestscape 6x costuma lan ar seu prprio reprodutor, que c ostuma ser da casa AOL, prec isando para a execu o uma srie de passos para se insc rever nessa c ompanhia c omo usurio do software. Resumindo: cada usurio ter configurada sua mquina de forma particular, c ostumando prevalec er o ltimo software de udio instalado, j que estes programas c ostumam se apropriar de c ertos tipos de arquivos para sua exec u o automtic a. Entre as aplica es possveis de exec u o de arquivos de udio, seja de forma direta ou em forma de plugins para os navegadores, destacam-se Windows Media Player, Real Player, Winamp, Quic k time, etc .
udio em HTML (IV)

Incluir udios na web. Uma vez esc olhidos nossos arquivos de udio, hora de inc lu- los em nossa pgina web. Logic amente, para que um arquivo de udio possa ser reproduzido por um navegador necessrio que sua mquina tenha includo um carto de udio e um par de alto-falantes. Existem diversas formas de inc luir um arquivo de udio em uma pgina, formas que dependem do tipo de arquivo e do navegador usado, e podemos usar diferentes etiquetas para cada una delas. BGSOUND A etiqueta bgsound inc orpora udios de fundo em uma pgina web, udios que se exec utam automaticamente ao c arregar pgina. uma etiqueta proprietria de Mic rosoft, por isso s
11/10/2010
interpretada por Internet Explorer, admitindo os formatos de udio MID e WAV, embora geralmente tambm aceita AU e MP3, em verses atuais do navegador ou mediante plugins de uso geral. Sua sintaxe geral, c om seus atributos mais importantes, do tipo:
<bgsound src="rota_arquivo" loop="l" balance="b" volume="v"></bgsound>
Onde: src="rota_arquivo" fixa a rota na qual se enc ontra o arquivo de udio a reproduzir. A rota pode ser relativa ao nosso sistema de pastas loc al, absoluta c om respeito ao sistema de pastas do servidor web ou uma URL c ompleta que loc alize o arquivo em Internet. loop="l" determina o nmero de vexes (l) que se deve exec utar o arquivo de udio. Se dermos o valor infinite, o arquivo se reproduzir indefinidamente. balance="b" determina o equilbrio de udio entre dois alto- falantes da mquina, ou seja, a potnc ia ou intensidade com que se escutar em c ada um deles (direito e esquerdo). Seus valores podem estar entre -10,000 e +10,000, correspondendo o valor 0 a um balanc e equilibrado entre os dois alto-falantes. volume="v" fixa o volume ao que se ouvir o udio, e seus valores podem variar entre 10,000 (mnimo) e 0 (mximo). No suportado pelas mquinas MAC. Exemplo:
<bgsound src="../audios/wav.wav" balance=0 volume=0></bgsound>
Pode-se ver func ionando nesta janela (s Internet Explorer). A etiqueta bgsound admite muitas mais propriedades (disabled, delay, id, c lass, c ontrols, etc.). Ainda assim, esta etiqueta ac essvel em Internet Explorer mediante c digo JavaScript, podendo modific ar em tempo real suas propriedades balanc e, loop, src, e volume, embora esta ltima s seja acessvel em plataformas PC. Para uma informao completa sobre todas as propriedades e func ionalidades desta etiqueta pode-se visitar a pgina correspondente de Mic rosoft: http://msdn.mic rosoft.c om/library/default.asp? url=/workshop/author/dhtml/reference/objec ts/bgsound.asp EMBED Nestc ape Navigator implementou a etiqueta embed para incorporar arquivos de udio. Easta uma etiqueta de carter geral, que se usa para a incluso nas pginas web de todos aqueles arquivos alehios ao navegador e que nec essitam portanto a execu o de algum plugin para sua interpretao. Paradoxalmente, Internet Explorer assumiu depois o uso desta etiqueta para a inc luso de arquivos de udio, para c hegar a interpret-la melhor e ampli-la com mais atributos e propriedades, de tal forma que a exec u o de udio c om embed atualmente mais c moda com este navegador, ao inc orporar a sute de Mic rosoft seus prprios plugins para a interpretao dos diferentes formatos de udio. Em troca, se usamos Netscape Navigator nos enc ontraremos em muitos c asos c om uma falha na reprodu o ou c om uma molesta mensagem de nec essidade de algum plugin espec ial (sobretudo nas verses 6x), o que nos obrigar a visitar a pgina de Netsc ape para seu download e instalao, que muitas vezes no ser efetiva. Seja como for, h que indic ar que esta etiqueta nos inc luir na pgina web um objeto especial, uma espc ie de c onsole de c omando, denominada Crescendo, que c onsta de trs botes, similares ao de qualquer reprodutor de udio: um boto Play, para come ar a reproduo (se no
11/10/2010
estiver estabelec ido o automtic o), um boto Pause, para deter momentaneamente e um boto Stop, para deter definitivamente (posto a zero). Este c onsole diferente segundo o navegador usado; no caso de Internet Explorer se mostra o tpic o c onsole de Windows Media, c ujo tamanho podemos c onfigurar, enquanto que em Netsc ape se mostra um c onsole prprio, de tamanho fixo definido. A sintaxe geral da etiqueta embed do tipo:
<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>
E no caso que nos oc upe, da inc luso de arquivos de udio, os atributos podemos dividi- los em dois tipos: 1. Atributos referentes ao udio: src="rota_arquivo", que fixa a rota na qual se encontra o arquivo de udio a reproduzir. A rota pode ser relativa ao nosso sistema de pastas loc al, absoluta respeito ao sistema de pastas do servidor web ou uma URL c ompleta que loc alize o arquivo em Internet. loop="l/true/false", que determina o nmero de vezes que se deve exec utar o arquivo de udio. Os valores admitidos so l (nmero inteiro de vezes), true (infinitas vezes) e false (s uma vez). S reconhecida por Netsc ape Navigator. playcount="n", que define o nmero de vezes (n) que se deve executar em arquivo de udio no caso de Internet Explorer. type="tipo_arquivo", atributo importante, que dec lara o tipo de arquivo de udio que estamos usando, c om o qual o navegador web pode exec utar o programa ou plugin adequado para a reproduo do arquivo. Pode ser audio/midi, audio/wav, etc . autostart="true/false", que determina se o arquivo de udio deve come ar a se reproduzir por si s ao c arregar a pgina ou se ao c ontrrio, ser prec iso a atuao do usurio (ou de cdigo de script) para que c omece a audi o. pluginspage="URL", que estabelec e, no c aso de ser nec essrio um plugin espec ial para reproduzir o arquivo, a pgina web onde se pode baixar o mesmo. S se ativa no caso de que o navegador no seja c apaz de reproduzir o arquivo por si mesmo, e suportada somente por Netsc ape Navigator. name="nome", que atribui um nome identificador (deve ser nico na pgina) a uma etiqueta embed determinada, c om objeto de ser ac essada logo por linguagens de sc ript. volume="v", que determina o volume de reprodu o de udio, e que pode variar entre 0 e 100. suportada somente por Netsc ape Navigator, que no c onsole mostra o valor estabelec ido em seu indic ador de volume, sendo seu valor padro 50. No c aso de Internet Explorer, o valor de volume por padro 50 em plataformas PC, e 75 em MAC, sendo nec essrio agir sobre o c ontrole de volume do c onsole para modific - lo. 2. Atributos referentes ao console: hidden="true/false", que estabelec e se o console ser visvel (false) ou no (true). Este um aspec to polmico, j que se ocultamos o c onsole obrigamos ao usurio a ouvir nosso arquivo, sem possibilidade de deter nem de modific ar o volume, e se o mostramos estaremos inc rustando na tela um objeto que muitas vezes nos romper o esquema de design de nossa pgina. Resta determinar seu uso em c ada caso c onc reto.
11/10/2010
width="w", que determina a largura visvel do console, em pixels. height="h", que determina a altura visvel do c onsole, em pixels. Estes atributos so tambm muito importante, no c aso de que tenhamos estabelec ido hidden= "false", j que de seu valor ir depender a correta visulaza o do c onsole. No c aso de Internet Explorer, que mostra um logo de Windows Media sobre os c ontroles, o tamanho mnimo aceitvel deve ser de 140x100 pixels, j que seno o console sair deformado em exc esso ou recortado. E no caso de Netsc ape Navigator, deveremos atribuir uns valores de 145x60 pixels, que o que oc upa o console; se colocarmos um tamanho menor, o c onsole ser rec ortado, perdendo funcionalidades, e se atribumos um tamanho maior, aparecero espaos c inzas ao redor do console, tornando o aspec to da pgina feio. Se no espec ificarmos estes atributos e tampouco hidden, aparecer na pgina somente os c omandos do console, sem logotipos adic ionados (Internet Explorer) ou o c onsole recortado (Netsc ape Navigator).
align="top/bottom/center/baseline/left/right/ texttop/middle/absmiddle/absbotom", anlogo ao da etiqueta IMG, define o alinhamento horizontal ou vertic al do c onsole c om respeito aos elementos da pgina. hspace="hs", que estabelec e a separa o horizontal, vspac e="vs", que estabelec e a separa o vertical, em pixels, entre o c onsole e os elementos da pgina que a rodeiam. Anloga aos seus equivalentes da etiqueta IMG. Estes so os atributos princ ipais, embora possamos enc ontrar refernc ias de outros admitidos, apesar de no c ostumarem ser operacionais na realidade, j que no funcionam de forma correta ou so especfic os de Nestc ape (c omo toda a srie de atributos que c onfiguram os c ontroles do c onsole). Exemplo sem console:
<embed src="../audios/mid.mid" hidden="true" type="audio/midi" autostart="true"></embed>
Que podemos ver em func ionamento nesta janela. Exemplo com console:
<embed src="../audios/mid.mid" hidden="false" type="audio/midi" autostart="false" width="150" height="100"></embed>
Que temos visvel (e audvel) nesta outra janela.

udio em HTML (V)

A etiqueta OBJECT. Com objeto de normalizar a inc luso de arquivos no nativos nos navegadores web se dec idiu substituir as diferentes etiquetas que realizavam este papel (APPLET, BGSOUND, EMBED, etc .), e que no pertenciam aos padres web, por uma etiqueta geral, que fosse c apaz de incrustar no navegador todo tipo de arquivo. A etiqueta esc olhida no padro HTML 4.0 foi OBJECT, a qual se dotou de sufic ientes atributos e flexibilidade para poder realizar c orretamente seu trabalho. Devido a isto, a proposta foi usar a etiqueta object tambm para incluir arquivos de udio de todo tipo nas pginas web. Pois bem, a aceitao e implementa o que a mesma teve varia segundo a do navegador em partic ular, assim como em fun o do objeto a inc rustar. Desta forma, Internet Explorer realizou
11/10/2010
sua prpria implementao da etiqueta objec t, inc luindo nela refernc ias a filtros e componentes Ac tiveX espec fic os para os arquivos de udio. Por seu lado, os navegadores Netsc ape no suportam c orretamente esta etiqueta para arquivos deste tipo. Restringindo-nos a Internet Explorer, a polmica continua, j que em diferentes manuais encontraremos diferentes formas de incrustar udios mediante objec t, umas que funcionam bem, e outras que no. Por que ac ontec e isto? Eu c reio que porque Mic rosoft foi usando a etiqueta object para implementar todo um grande c onjunto de componentes prprios, que ademais foram se adaptando s diferentes verses de Internet Explorer. Como regra geral, vlida no s para inc rustar arquivos de udio, c omo tambm para outros tipos, a etiqueta object vai definir um objeto ou c omponente externo enc arregado da reprodu o do arquivo, que no c aso de Internet Explorer c ostuma ser algum tipo de c ontrole Ac tiveX. Mediante object se instancia o objeto, se dec lara sua URL e suas princ ipais propriedades gerais, e mediante um c onjunto de etiquetas especiais, PARAM, se passam os valores que necessita para seu correto func ionamento ou para sua configurao desejada. A sintaxe geral da etiqueta objec t, para o c aso de arquivos de udio, do tipo:
<object atributo1="valor1" atributo2="valor2" ... atributoN="valorN"> <param name="nome" value="valor"> <param name="nome" value="valor"> ... </object>
Os principais atributos de object, em refernc ia a arquivos de udio, so: classid="identificador_objeto", que fixa a URL do objeto ou componente externo nec essrio para reproduzir o arquivo de udio, e a implementao CLSID dos c ontroles ActiveX nec essrios. type="tipo_arquivo", atributo importante, que dec lara o tipo de arquivo de udio que estamos usando. width="w", que determina a largura visvel do console, em pixels. height="h", que determina a altura visvel do c onsole, em pixels.
align="top/bottom/center/baseline/left/right /texttop/middle/absmiddle/absbotom", anlogo ao da etiqueta IMG, define o alinhamento horizontal ou vertic al do c onsole c om respeito aos elementos da pgina. hspace="hs", que estabelec e a separa o horizontal, vspac e="vs", que estabelec e a separa o vertical, em pixels, entre o c onsole e os elementos da pgina que a rodeiam. Anloga aos seus equivalentes da etiqueta IMG. autostart="true/false", que determina se o arquivo de udio deve come ar a se reproduzir por se s ao carregar a pgina ou se pelo contrrio ser preciso a atua o do usurio (ou de cdigo de script) para que c omece a audi o. standby="mensagem", que apresenta em tela uma mensagem ao usurio enquanto carrega o arquivo. Quanto aos elementos, param os mais importantes so:
11/10/2010
param name="FileName" value="rota_arquivo", determina a rota ou URL do arquivo de udio a reproduzir. No nec essrio utilizar s arquivos WAV ou MID, podendo reproduzir tambm arquivos MP3 ou Real Audio. Explorer inc lui o reprodutor do primeiro em Ac tiveMovie (componente de Windows Media). param name="autostart" value="true/false", indica ao navegador se se deve come ar a reproduzir o udio automaticamente ao c arregar a pgina ou se pelo c ontrrio ser preciso que o usurio c lique o boto Play para isso. Estes no so todos os atributos e parmetros possveis. Na verdade, quanto aos c omponentes Mic rosoft, podemos enc ontrar uma infinidade de c onfigura es possveis, que vo nos permitir fixar muitos aspec tos dos mesmos. Deixo a c ada um a possibilidade de aprofundar no estudo daqueles c omponentes e propriedades que necessite, porm sabendo que com os elementos vistos acima temos mais que sufic iente para apresentar um arquivo de udio em nossa pgina web. xExemplo:
<object classid="C LSID:05589FA1-C356-11C E-BF01-00AA0055595A" width="150" height="175" type="audio/midi"> <param name="FileName" value="../audios/xfiles.mid"> <param name="autostart" value="true"> </object>>
Que se pode ver func ionando nesta janela (somente em Internet Explorer). A etiqueta A. Se at agora vimos c omo podemos inc luir em nossas pginas udios de fundo ou inic iados pelo usurio mediante interao c om o c onsole Cresc endo, vamos ver agora c omo podemos implementar udio mediante o uso de uma das etiquetas mais polivalentes em HTML: a etiqueta A. Efetivamente, os links so a base do hipertexto, base por sua vez da web, e dentro de seus mltiples usos podemos c onsiderar o link a arquivos de udios. O arquivo linkado pode ser interpretado diretamente pelo navegador (por ser de reprodu o direta ou por ter instalado o plugin adequado) ou pode ser exec utado por um programa independente que se abra automaticamente (Winamp, Real Audio, etc.), sendo este o c aso mais comum. Se o usurio no dispe do programa ou plugin adequado, se abrir uma janela de download do arquivo, c om o qual poder salv-lo at dispor da aplic ao necessria para sua reprodu o. A sintaxe geral neste c aso ser do tipo:
<a href="rota_arquivo">Mensagem</a>
Exemplo de arquivo MID:

<a href="../audios/watermark.mid">Msica para voc</a>
Que podemos ver em func ionamento nesta janela. Exemplo de arquivo MP3:
<a href="../audios/mp3.mp3">Madonna</a>
Que temos nesta outra janela.

72/83
11/10/2010
Declarao DOCTYPE em documentos HTML

Neste artigo nos c entraremos na dec larao DOCTYPE dos doc umentos HTML. O W3C (World Wide Web Consortium: www.w3.org), enc arregado da cria o dos Standard webs, define que os arquivos HTML, XML, XHTML devem ter uma dec larao de tipo DOCTYPE que deve fazer refernc ia a uma das trs defini es do tipo de doc umento que existem. Esta dec lara o deve ser a primeira linha de nosso doc umento e nec essria para dizer ao navegador que verso de HTML a que se usa na pgina. Se no se faz, o navegador proc essar a pgina em modo Quirks (modo de compatibilidade) podendo no interpretar c orretamente o c digo da pgina. A DTD (defini o do tipo de documento) a estrutura regulamentar, ou seja, os elementos e atributos que esto disponveis para c ada tipo de documento. Para HTML 4.01 (as verses anteriores no so rec omendveis devido a que no so totalmente c ompatveis c om as Folhas de Estilo), existem 3 tipos de DTD: 1. HTML 4.01 transitrio O HTML 4 transitrio inc lui todos os elementos e qualidades de HTML 4 Stric t, porm agrega qualidades "presentational", elementos desaprovados ou elementos obsoletos. Chama-se Transitional porque est pensado c omo transio para HTML 4 estrito. O modo de defini- la : <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> 2. HTML 4.01 Frameset: Esta uma variante de HTML 4 transitrio para os doc umentos que utilizam Frames (molduras). O modo de defini- la : <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Frameset//EN\" \"http://www.w3.org/TR/html4/frameset.dtd\"> 3. HTML ESTRITO Se dec lararmos este DTD, o navegador passar a agir em c umprimento dos padres (Standards c ompilam- se). Isto implic ar que s possam se usar as etiquetas de HTML 4.01. Este o modo rec omendado pelo W3C, j que compatvel c om o CSS e pode ser interpretado c orretamente por todos os navegadores, tornando muito mais fcil o passo de nossos doc umentos ao XHTML que muito possivelmente tenda a substituir ao HTML nos prximos anos. O modo de defini- la : <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/stric t.dtd\"> Se quisermos saber se nossa pgina c umpre com o DTD definido podemos faz-lo desde http://validator.w3.org/
Informe de Jose A. Molina e-mail: info@webmolina.net
73/83
11/10/2010
Atributo nofollow nos links

Deixaremos aqui uma pequena resenha sobre um atributo que est se convertendo em essenc ial nos links e que no tnhamos c omentado em nosso manual de HTML, embora sim que vimos algo em nosso manual de posic ionamento em busc adores. Nofollow um atributo dos links HTML (etiqueta <A>), que serve para definir ou marc ar o c omportamento dos busc adores quando rastreiam nossa pgina web em busc a de c ontedos para index- los. Por padro, quando um buscador visita uma pgina web vai percorrendo todos seus links e vai indexando seu c ontedo em seu banco de dados de pginas. Isto algo que fazem automtica e periodic amente. Oc orre tanto c om os links internos a outras pginas de nosso site c omo com os links externos a outras pginas web. Os motores que percorrem as webs de link a link, se c hamam aranhas. Pois bem, ns podemos atravs do atributo rel="nofollow", dizer a um busc ador que no continue indexando os c ontedos da pgina a qual leva um link em particular. Faramos assim:
<a href="URL_DO_LINK" rel="nofollow">TEXTO_DO_LINK</a>
Um pouco de histria sobre nofollow Para completar estas notas teramos que c omentar que o atributo foi c riado por inic iativa de Google e Blogger em 2005, c omo uma idia para deter o spam de links em websites que permitem aos usurios a partic ipa o. Uma prtic a c omum das pessoas que pretendem divulgar uma pgina web realizar c omentrios ou partic ipa es em pginas web, nas que inserem links aos seus prprios sites. Isto se conhece c omo spam de links, ou c om o trmino de spamdexing. Com o atributo rel="nofolow" pretende-se mitigar os efeitos desse tipo de spam nos sites como fruns, blogs, ou qualquer pgina que permita a intera o com a comunidade de visitantes. Algumas pginas c omo a Wikipedia o utilizam em todos os links externos. Atualmente, o atributo ren=nofollow est sob patente, embora esteja liberada de royalties, o que quer dizer que se pode utilizar sem limita o e sem ter que pagar nada. Como os buscadores interpretam o Nofollow O atributo tido em c onta no s pelo motor de indexa o (aranha) do busc ador Google, c omo tambm por outras aranhas de buscadores to importantes c omo Yahoo! ou MSN. Entretanto h que dizer que c ada busc ador faz um uso particular do atributo. Temos que esclarec er que os buscadores muitas vezes seguem o link que se marc ou como nofollow, visitando aquela web que se linkou. O que oc orre realmente que no tem em conta o link para atribuir ranking ou diretamente no o indexam. Divulgao de webs e nofollow Faltaria dizer que este atributo bastante potente na hora de trabalhar c om a divulgao de uma pgina web, visto que altera diretamente o comportamento dos busc adores ao rastrear as pginas, link a link. Sendo assim, os SEO, divulgadores de pginas ou pessoas que trabalham no posic ionamento em busc adores, tm muito em c onta em suas tc nicas para seu trabalho do dia. Existem diversas tc nic as que utilizam este atributo para realizar promoo de webs, c omo a que explicamos no artigo Arrisc ada, mas exc elente tcnic a SEO usando rel=nofollow, porm o uso mais importante o que se c omentou j neste artigo: coloc-lo aos links externos para no transferir ranking ou posic ionamento desde nossa web a outras webs externas. Outra tc nic a relac ionada com nofollow, porm mais segura, para que no se indexe parte do c ontedo de nossa pgina, o uso do arquivo robots.txt, que j c omentamos anteriormente em CriarWeb.com.
Informe de Miguel Angel Alvarez - Traduo de JML
74/83
11/10/2010
e-mail: juliana@criarweb.com
Etiqueta Iframe
Os frames (frame em ingls significa moldura) so umas ferramentas que tiveram uma histria dilatada no desenvolvimento de pginas web c om HTML. De ser uma etiqueta no padro passou a ser suportada por todos os navegadores e fazer parte das especific a es de HTML. Por outro lado, o frame sempre foi uma utilidade para fazer pginas web de uso c omo mnimo controvertido, visto que tem c ertas desvantagens que muitas vezes so mais importantes que a indubitvel pratic idade. Em qualquer c aso, em CriarWeb.c om j falamos sufic iente sobre a etiqueta Frame e tratamos amplamente suas vantagens e inc onvenientes. Neste artigo iremos falar de uma etiqueta "irm" que atualmente muito mais usada, porque mais til e menos problemtic a que os prprios frames. Trata-se de iframe, uma tag includa nas espec ifica es de HTML 4.0.
Nota: iframe vem de inline frame, porm em portugus tambm se poderia chamar de frames flutuantes
Refernc ias sobre a etiqueta frame: Frames em HTML Vantagens e inc onvenientes do uso de frames Frames - Explic a o bsica Frames sem bordes Frames - Atributos avanados Atualizar dois frames c om um s link Frames - Uma pgina em c ada moldura ... Teoric amente iframe serve para c riar um espa o dentro da pgina onde se pode inc rustar outra web. um quadrado cujas dimenses o desenvolvedor deve espec ific ar na prpria etiqueta iframe, que tem assoc iada uma pgina web que se carrega em tal espao. Essa pgina web ter seus prprios contedos e estilos, independentes do c ontexto onde se est mostrando. Ademais ser perfeitamente func ional: se tiver links se mostraro nesse mesmo espao e se tiver scripts ou aplica es dentro se exec utaro tambm de maneira autnoma no espa o reservado ao iframe. Exemplos de uso de iframe Iframe se utiliza em muitos contextos. Dentro de um iframe podemos mostrar contedos de outras pginas, c omo se estivessem na nossa, como por exemplo: Cdigos de banner, que se invoc am por meio de um iframe pedindo os dados do banner geralmente a um servidor de banners que pode estar em outra rede. Visualizar c ontedos de terc eiros, c omo bloc os de notc ias ou novidades que oferec em em outras webs. Interfac es de usurio, em que c ertas atividades se realizam de forma autnoma e o processamento est em outra pgina web. Uso de iframe frente a frame Atualmente, a etiqueta iframe se utiliza mais que a etiqueta frame, porque no d tantos problemas como esta. A diferen a princ ipal est baseada em que a etiqueta iframe no necessita uma dec larao dos espa os dos frames ou frameset, porque se inc rusta no c digo HTML da pgina. O iframe, portanto, no provoc a problemas de navegao, c omo os que oc orrem com os frames normais se no se entra corretamente atravs do frameset.
11/10/2010
Tambm, j que no existe o frameset nos iframes, no sofre os problemas do uso de frames, sobretudo na hora em que a pgina indexada nos motores de busc a. Por dizer de alguma maneira, trabalhar c om iframe ou frames flutuantes to simples c omo fazer uma tabela, que se c odifica dentro da c onstru o HTML, com seu espao reservado dentro da pgina. Sendo assim, a nic a diferena com respeito a uma tabela que o contedo do iframe se extrai de outra pgina web. Construo da etiqueta iframe Como dissemos, o iframe se coloc a diretamente no c digo HTML, no lugar onde quisermos que aparea. Coloca-se um cdigo como este:
<iframe src="pagina_fonte.html" width=290 height=250>Texto para quando o navegador no conhece a etiqueta iframe</iframe>
Como se v, os atributos princ ipais de iframe so a pgina web que se mostrar no espa o e a largura e altura da moldura que reservemos para o frame flutuante. Como se pode ver, a etiqueta iframe tem sua c orrespondente etiqueta de fec hamento. Todo o texto que c oloc armos entre a etiqueta de inc io e a de fec hamento ser texto alternativo, que s se mostrar no caso em que o navegador do visitante no aceite a etiqueta iframe. Todos os atributos de iframe Estes seriam os atributos disponveis para a etiqueta iframe: src: Para indic ar a pgina web que se mostrar no espao do frame flutuante. width: Para definir a largura da moldura do iframe height: Para definir a altura do iframe name: Para especific ar o nome do frame, que podemos utilizar logo para nos referirmos a ele c om o target dos links, ou mediante javascript. id: Para indic ar o identific ador do iframe, e poder nos referir a ele atravs de javasc ript. frameborder: para definir se queremos ou no que haja uma borda no frame. Os valores possveis so 0 | 1. frameborder=0 indicaria que no queremos borda e frameborder=1 que sim que queremos. scrolling: indic a se se quer que apare am barras de desloc amento para ver os c ontedos do iframe c ompleto, no c aso em que no apaream no espa o reservado para o iframe. Os valores possveis so: yes | no | auto. O valor "yes" para que apare am sempre as barras de deslocamento ou barras de scroll, "no" serve para que no apare am nunca e "auto" para que apaream s quando forem necessrias ( o valor padro). marginwidth: Para definir a margem esquerda e direita que deve ter a pgina que vai dentro do iframe, c om respeito borda. Esta margem vai em pixels, porm prevalec er a margem que possa ter atribuda a pgina web que mostremos no frame flutuante. marginheight: o mesmo que marginwidth, porm neste c aso para o tamanho da margem pela parte de cima e de baixo. margin: para espec ific ar alinhamento do frame, assim como se espec ific a para as imagens. style y class: os atributos para definir o aspec to do iframe por meio de folhas de estilo css.
76/83
11/10/2010
Para ac abar, aqui vemos outro exemplo de iframe c om uns quantos atributos mais:
<iframe name=meuframeflutuante src="colabora.htm" width=400 height=550 frameborder="0" scrolling=yes marginwidth=2 marginheight=4 align=left>Tu navegador nao suporta frames!!</iframe>
Doctype HTML
Dentro da moldura de nosso manual de HTML e em linhas gerais, podemos dizer que o DOCTYPE uma dec larao do DTD usado ao c onstruir um documento HTML ou XHTML. Entretanto, para ser um pouco mais restritos, devemos esc larecer que o Doctype o prprio de documentos XML e SGML, e portanto, as linguagens HTML ou XHTML so uns simples herdeiros de algo que j se vinha utilizando. Temos que esclarec er tambm que DTD signific a Definition Type Doc ument e uma declara o em uma metalinguagem para definir outra linguagem. Dito de outra maneira, o DTD marca as regras para a definio de linguagens como o HTML. Podemos c onhecer mais o que um DTD no artigo do manual de XML de CriarWeb.c om: DTD e XML Sc hema. Assim, voltando atrs, poderamos dizer que os documentos HTML ou XHTML esto esc ritos em uma linguagem e c om o Doc type espec ificamos esta linguagem e a verso da mesma. Os navegadores lero esta declara o de doc type e interpretaro a pgina atendendo s regras definidas nessa linguagem. Nota: Para os navegadores importante conhec er o doc type da pgina web, porque desse modo podem mostrar a pgina web c om a verso exata da linguagem HTML ou XHTML c om a que foi c onstruda. Se no tm uma dec larao de doctype, interpretaro a pgina no que se c hama "quirks mode", um modo que proc ura maximizar a compatibilidade da pgina c om verses anteriores da linguagem HTML. De modo que a utiliza o da etiqueta nec essria se desejamos c umprir um padro de HTML ou XHTML, para espec ific ar que verso ou linguagem utilizamos e que o browser identifique a pgina c onforme tal padro. O DOCTYPE tem uma forma c omo segue:
<!DOC TYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
O doctype deve se inc luir na primeira linha do c digo HTML da pgina. Por explicar de alguma maneira esta etiqueta, que parec e meio c omplicada, diz que um DOCTYPE de um documento HTML e nos d dois dados adic ionais. Com o texto "-//W3C//DTD XHTML 1.0 Transitional//EN" indicamos que este documento se tem que validar c om a especific a o de XHTML 1.0 e que o tipo de doc umento Transitional. Por outra parte, http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd a URL do DTD que serve para validar o cdigo HTML da pgina. O tipo de doc umento, que havamos assinalado c omo Transitional no doctype expressado antes, quer dizer que o documento utiliza um leque mais amplo de etiquetas HTML e atributos, inclusive alguns que possam ter fic ado obsoletos. H outros dois tipos de doc umentos. Por um lado, temos stric t, que indic a que o c digo HTML ou XHTML estrito, sem incluir atributos e etiquetas em desuso. O outro tipo de doc umento que falta o frameset, que se utiliza quando estamos realizando uma declara o de frames ou frameset. Portanto, dependendo de nossa pgina e do c digo que utilizarmos, teremos que declarar um ou outro doc type. Existem diversos Doc type que abrangem uma grande gama de possibilidades,
11/10/2010
c onfigurando distintas verses de HTML ou XHTML e distintos tipos de documento, stric t, transitional ou frameset. Este artigo de c riarweb .c om se c ompleta agora c om uma lista de alguns destes doctype mais utilizados atualmente: Doctype XHTML 1.0 strict
<!DOC TYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Doctype XHTML 1.0 transitional

<!DOC TYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Doctype XHTML 1.0 frameset

<!DOC TYPE html PUBLIC "-//W3C //DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Doctype HTML 4.01 strict

<!DOC TYPE HTML PUBLIC "-//W3C //DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Doctype HTML 4.01 transitional

<!DOC TYPE HTML PUBLIC "-//W3C //DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Doctype HTML 4.01 frameset

<!DOC TYPE HTML PUBLIC "-//W3C //DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com
Etiqueta META robots

Mediante as diferentes etiquetas META que podemos coloc ar em um website dispomos de uma variedade ampla de meta- informa es para comunicar a qualquer sistema que leia nossa pgina web. Neste artigo vamos apresentar uma etiqueta interessante para definir c omo se tm que c omportar os motores de busca na hora de visitar nossa pgina e mostr-la entre os resultados de busc as realizados no busc ador. Trata- se da etiqueta meta de robots. A etiqueta META de Robots serve para personalizar o comportamento de robots de indexa o, tipo Google, na hora de proc essar nossa pgina web. Cada uma das pginas de nosso site pode ter uma dec larao da etiqueta meta de robots distinta, com o qual podemos inclusive definir de maneira independente c omo desejamos que se trate c ada uma das pginas que c ompe o web. Em CriarWeb.c om public amos anteriormente informa es sobre distintas etiquetas META em artigos. Etiqueta ROBOTS de META Tags Como dissemos, a etiqueta robots, dentro das possveis etiquetas com Meta-informa es sobre um documento web, serve para levar um c ontrole exaustivo do que pode ou no pode fazer um robot de indexa o quando visita nosso website. Os c omportamentos mais tpic os que podemos definir so permitir ou no indexar uma pgina e seguir ou no seus links.
Nota: C onvm recordar que tambm se pode definir o comportamento dos robots de busca com nosso site, na hora por exemplo de permitir ou no indexar as distintas pginas, mediante o arquivo robots.txt.
78/83
11/10/2010
Agora vejamos c omo se define esta etiqueta META de robots.

<META name="robots" content="NOINDEX">
Como se pode ver, se define a etiqueta META e se acompanha de dois atributos essenc iais: Name: que para a etiqueta META que c ontrola os c omportamentos em motores de indexao o valor "robots". Content: se indic a as diretivas que queremos que apliquem os motores de indexao quando visitam a pgina. Valores possveis da etiqueta META ROBOTS No atributo Content da etiqueta meta devemos c olocar as diretrizes que desejarmos para busc adores, tantas c omo desejarmos, separadas por vrgulas. As distintas diretrizes a aplic ar so as seguintes: INDEX / NOINDEX Serve para indic ar se se deseja ou no permitir a indexa o da pgina pelos motores de busc a. FOLLOW / NOFOLLOW Com esta diretriz se indic a se se deve ou no permitir aos motores de busca percorrer ou seguir perc orrendo a web atravs dos links que enc ontre no c orpo do doc umento. ARCHIVE / NOARCHIVE Isto permite dizer se desejamos ou no que o motor de busca arquive o c ontedo do website em seu cac h interno. Como pudemos ver, busc adores c omo Google tm um c ache e podemos ver as pginas web tal c omo as tem "cac headas" o buscador. Para isso, nos resultados das busc as aparece um link que pe c ache. Se dissemos que no arquive a pgina, no deveria mostrar esse link de c ac he. Isto na verdade, segundo Google, no evita que se salve em c ache a pgina, e sim que no permite v-la aos usurios do buscador e portanto no mostra o link. SNIPPET / NOSNIPPET Esta diretriz princ pio no resulta muito til, pelo menos a primeira vista. Serve para que o motor de busc a no mostre nenhuma descri o de um site, s seu ttulo. Se utilizar NOSNIPPET automaticamente define um NOARCHIVE, por isso que a pgina tampouco se mostrar em c ac he. ODP / NOODP Serve para dizer ao busc ador que deve, ou no, mostrar o ttulo e desc ri o da pgina iguais aos que se encontra no Open Direc tory Projec t. Em alguns c asos, alguns busc adores mostram como ttulo e desc ri o de uma web os que se public aram no ODP (http://www.dmoz.org/). YDIR / NOYDIR basic amente o mesmo que ODP / NOODP, c om a diferena que para que no se possa, ou se, mostrar a desc rio e ttulo que aparec e no diretrio de Yahoo. Quando no existe esta etiqueta os busc adores interpretam as c ondi es mais favorveis para eles, ou seja, que podem fazer tudo o que c ostumam fazer c om outras pginas a nossa, c omo index- la, seguir seus links, arquiv-la, etc . Exemplos de etiquetas META ROBOTS Na hora de utilizar a META ROBOTS basic amente o que podemos fazer restringir as possibilidades dos motores de busc a, visto que as possibilidades por padro so as menos restritivas. Isto quer dizer que uma etiqueta como a seguinte irrelevante, porque o buscador sempre vai indexar a pgina e seguir seus links de maneira pr-determinada:
<META name="robots" content="INDEX,FOLLOW">
79/83
11/10/2010
Podemos definir ento c asos mais restritivos c omo estes:

<META name="robots" content="INDEX,NOFOLLOW">
Para indic ar que se deseja que se indexe a pgina, porm no se sigam os links. Dada que a opo INDEX a que se subentende por padro, esta etiqueta teria o mesmo valor que a seguinte:
<META name="robots" content="NOFOLLOW">
Para indic ar que no queremos que se sigam os links da pgina.

<META name="robots" content="NOINDEX,NOFOLLOW">
Para indic ar que no queremos que se indexe a pgina nem que se sigam os links que possa c onter.
<META name="robots" content="NOARC HIVE">
O nico que indic amos que no se mostre o link para ver a pgina no cache do busc ador.
<META name="robots" content="NOINDEX,NOFOLLOW,NOARC HIVE,NOODP,NOSNIPPET">
Com esta restritiva etiqueta for amos para que no se indexe a pgina, no se sigam os links, no se mostre o link de c ac he, no se mostre o ttulo e desc rio do Open Direc tory Project e s se mostre o ttulo da pgina nos resultados das buscas.
O futuro do desenvolvimento web: HTML 5

No momento de esc rever este artigo, a espec ifica o de HTML 5 est ainda em fase de prova, no obstante, em alguns navegadores, recentemente esto se c oloc ando em funcionamento, de forma experimental, algumas das c arac terstic as que trar c onsigo este novo padro. Paralelamente, vo surgindo novas informa es e referncias que explic am o que HTML 5, o que faz com que nos sintamos c ada vez mais impacientes por conhec er bem as novas partic ularidades da linguagem e sobretudo, por come - las a aplic ar em nossos desenvolvimentos. Este artc ulo de CriarWeb.com pretende oferecer algumas pistas para c onhec er o c aminho que atualmente est percorrendo a linguagem de marc a o para se converter em uma realidade, e ainda explic ar um pouco quais so as novidades mais importantes que esto por vir.
Por que se cria HTML 5

Aos que se dedic am a fazer pginas web sabem que um website c omo um quebra- cabe a de tec nologias que operam entre si. Para fazer uma pgina, princ pio , se necessita simplesmente HTML, porm esta afirma o hoje tem pouc o a ver c om a realidade e com as nec essidades dos desenvolvedores para criar uma ric a experinc ia de usurio. que hoje pouc os websites se baseiam unic amente em HTML. Pode-se utilizar CSS para definir o aspecto da pgina, algum tipo de sc ript do lado do c liente, em Javascript, vdeos em diversos formatos ou Flash para realizar alguma anima o ou intera o com o usurio. Para poder se beneficiar e integrar todas estas tec nologias, existem uma infinidade de etiquetas que se foram c riando, segundo iam se nec essitando, e as quais no passaram pelo filtro dos normalizadores de tec nologias como o W3C. Portanto, mais de 10 anos depois que se public asse a ltima especific a o do HTML, resulta primordial para o futuro da web a criao de um novo padro que rec olha e soluc ione de alguma maneira, as nec essidades dos desenvolvedores que se foram c riando ao longo de todo este tempo.
Esforos em diversas vertentes para a criao de HTML 5

11/10/2010
Sem dvida j faz tempo que se necessitava esta nova espec ific ao, que hoje ainda est em fase de prova e poderamos nos perguntar: Por que se passou tanto tempo sem se public ar esta nova verso da linguagem? A resposta que HTML 5 se converteu em um projeto muito ambic ioso, onde h muitas pessoas, empresas e instituies que tm muito que opinar. de vital importnc ia, portanto, c oordenar a todos os implicados para c riar um nico ponto c omum, que assegure esta vez um xito da tecnologia c omo um padro. princ pio, os enc arregados de regular os padres da Internet so os integrantes do W3C, que estiveram trabalhando durante bastante tempo em outras linguagens como XML. No se pode dizer que deixaram de lado HTML, porm de alguma maneira estavam c riando outros padres mais rgidos que substitussem a linguagem. Diante dessa falta de interesse em HTML e as necessidades reais dos desenvolvedores de webs por parte do W3C, se criou em 2004 uma c omunidade de pessoas interessadas em melhorar e modernizar a linguagem de marc a o. Este novo grupo, c hamado WHATWG (Web Hypertext Application Technology Working Group), se c riou a raiz de uma c onferncia do W3C c om pessoas integrantes das equipes de desenvolvimento de Apple, a Funda o Mozilla e Opera, ao que se foram agregando pessoal de Mic rosoft e outras empresas implicadas no mundo web. O WHATWG, que funciona de maneira independente do W3C, tem como objetivo princ ipal trabalhar na nova espec ific ao do HTML 5 e a eles devemos muitos dos avanc es que esto por c hegar c om rela o linguagem. uma organiza o aberta, onde qualquer um pode partic ipar livre e gratuitamente. De fato, segundo comentam em sua web, esto realmente interessados nas opinies e interesses das pessoas que trabalham c om o desenvolvimento web, para c riar umas especific a es que respondam s necessidades reais dos profissionais da Internet.
Links relacionados
Para a doc umenta o dos leitores, public amos os links s provas de espec ific aes do HTML 5 e as organiza es que trabalham nelas: W3C HTML Working Group: http://www.w3.org/html/ WHATWG http://www.whatwg.org ltima verso public ada das espec ific aes de HTML 5 http://www.w3.org/TR/html5/ Especific a es do HTML 5 pela WHATWG http://www.whatwg.org/specs/web- apps/c urrent-work/multipage/
Concluso
Pudemos c omprovar que existem numerosos esfor os para a c ria o das novas especific a es do HTML 5, realizados por distintas organiza es, independentes, porm que trabalham em uma frente c omum. No prximo artigo veremos, quando estar pronto e quais so as principais novidades que trar.
O que HTML 5
No artigo anterior public ado em CriarWeb.com, "O futuro do desenvolvimento web: HTML 5" explic amos as razes pelas quais verdadeiramente importante esta nova verso da linguagem de marc ao HTML e vimos quem so os que esto realizando sua especifica o.
11/10/2010
Agora nos convm explic ar o que exatamente HTML 5, j que no simplesmente uma nova verso da linguagem de marcao HTML, e sim um agrupamento de diversas espec ifica es c onc ernentes ao desenvolvimento web. Ou seja, HTML 5 no se limita s a criar novas etiquetas, atributos e eliminar aquelas marcas que esto em desuso ou se utilizam inadequadamente, e sim que vai muito mais alm. Sendo assim, HTML 5 uma nova verso de diversas especific a es, entre as que se enc ontram: HTML 4 XHTML 1 DOM Nvel 2 (DOM = Doc ument Objetc Model) HTML 5 pretende proporc ionar uma plataforma com a que desenvolver aplic a es web mais parec idas s aplica es de rea de trabalho, onde sua exec uo dentro de um navegador no implique falta de rec ursos ou fac ilidades para resolver as nec essidades reais dos desenvolvedores. Para isso se esto c riando umas APIs que permitam trabalhar c om qualquer dos elementos da pgina e realizar a es que at hoje era necessrio realizar por meio de tec nologias acessrias. Estas API, que tero que ser implementadas pelos distintos navegadores do merc ado, se esto documentando detalhadamente, para que todos os Browsers, criados por qualquer companhia as suportem tal qual se desenharam. Isto se faz c om a inten o que no oc orra o que vem ac ontecendo no passado, que c ada navegador faz a guerra por sua parte e os que ac abam pagando-o so os desenvolvedores e os usurios, que tm muitas possibilidades de acessar a webs que no so compatveis c om seu navegador preferido.
Quando estar pronto HTML 5

Segundo informam na pgina da organiza o WHATWG, HTML 5 prev que esteja pronto c omo especific a o de implementa o rec omendada em 2012. Isto que dizer que vamos ter que esperar at 2012 para aproveitar as vantagens de HTML 5? Realmente no justamente assim, visto que alguns navegadores j implementam muitas das c arac tersticas da moderna linguagem. que HTML 5 est formado por muitos mdulos distintos, c ujo grau de espec ifica o est em nveis desiguais. Portanto, muitas das carac tersticas de HTML 5 esto j prontas para ser implementadas, em um ponto de desenvolvimento que se enc ontra prximo ao que finalmente ser apresentado. Outras muitas c arac tersticas esto ainda simplesmente de molho, a modo de idias ou rasc unhos iniciais. De fato, as verses mais novas de quase todos os navegadores, includo o polmico Internet Explorer 8, implementam algumas das c arac terstic as de HTML 5. Claro que, para que uma web se veja bem em todos os sistemas, h que utilizar s aquelas partes que funcionam em todos os navegadores, por isso que ao dia de hoje, pouc as so as utilidades realmente disponveis da linguagem, se queremos fazer um website c ompatvel. No obstante, no pior dos casos, podemos c ome ar a usar a nvel experimental estas c arac terstic as, mesmo que s seja para esfregarmos as mos em espera de incorpor-las realmente em nossas prticas de desenvolvimento habituais.
Quais so as novidades de HTML 5

HTML 5 inclui novidades significativas em diversos mbitos. Como dizamos, no s se trata de inc orporar novas etiquetas ou eliminar outras, e sim que se supe melhoras em reas que at agora fic avam fora da linguagem e para as que se necessitava utilizar outras tec nologias. Estrutura do corpo: A maioria das webs tm um formato c omum, formado por elementos como cabe alho, p, navegadores, etc. HTML 5 permite agrupar todas estas partes de uma web em novas etiquetas que representaro cada uma das partes tpicas de uma pgina. Etiquetas para contedo especfico: At agora se utilizava uma nica etiqueta para inc orporar diversos tipos de contedo enriquecido, c omo anima es Flash ou vdeo. Agora se utilizaro etiquetas especfic as para cada tipo de contedo em particular, como udio, vdeo, etc . Canvas: um novo componente que permitir desenhar, por meio das funes de um API, na pgina todo tipo de formas, que podero estar animadas e responder a interao do
11/10/2010
usurio. algo assim c omo as possibilidades que nos oferec e Flash, porm dentro da especific a o do HTML e sem a necessidade de ter instalado nenhum plugin. Bancos de dados locais: o navegador permitir o uso de um banco de dados loc al, c om a que se poder trabalhar em uma pgina web por meio do cliente e atravs de um API. algo assim como as Cookies, porm pensadas para armazenadas grandes quantidades de informa o, o que permitir a c ria o de aplic a es web que funcionem sem nec essidades de estar c onec tados a Internet. Web Workers: so proc essos que requerem bastante tempo de processamento por parte do navegador, porm que se podero realizar em um segundo plano, para que o usurio no tenha que esperar que se terminem para c omear a usar a pgina. Para isso, se dispe tambm de um API para o trabalho c om os Web Workers. Aplicaes web Offline: Existir outro API para o trabalho com aplic aes web, que se podero desenvolver de modo que func ionem tambm em local e sem estar c onectados a Internet. Geolocalizao: As pginas web se podero loc alizar geograficamente por meio de um API que permita a Geoloc alizao. Novas APIs para interface de usurio: temas to utilizados como o "drag & drop" (arrastar e soltar) nas interfac es de usurio dos programas c onvencionais, sero inc orporadas ao HTML 5 por meio de um API. Fim das etiquetas de apresentao: todas as etiquetas que tm a ver c om a apresenta o do doc umento, ou seja, que modificam estilos da pgina, sero eliminadas. A responsabilidade de definir o aspec to de uma web c orrer a c argo unic amente de CSS. Como se pode ver, existiro vrios API c om os quais poderemos trabalhar para o desenvolvimento de todo tipo de aplic a es c omplexas, que funcionaro on-line e off-line. Talvez se entenda melhor por que HTML 5 um projeto to ambicioso e que est levando tanto tempo para ser elaborado.
Todos os direitos de reprodu o e difuso reservados
Voltar
83/83

Manual Completo HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual Completo HTML

Enviado por

Direitos autorais:

Formatos disponíveis

11/10/2010

Manual de HTML - Manual completo

Prlogo ao manual de HTML

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

O resultado seria: Ol, estamos no pargrafo 1 Agora mudamos de pargrafo

Manual de HTML - Manual completo

Sua primeira pgina

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Formato de pargrafos em HTML

O resultado seria: Texto alinhado esquerda

Para uma justific a o ao c entro:

11/10/2010 justific a o ao c entro: Para uma

Manual de HTML - Manual completo

<p align="center">Texto alinhado ao centro</p>

Que seria: Texto alinhado ao c entro

Para justificar direita:

Cujo efeito seria: Texto alinhado direita

Manual de HTML - Manual completo

Ser visto dessa maneira na pgina:

Ser visto dessa maneira na pgina:

Manual de HTML - Manual completo

Pode-se ver o exerc cio em uma pgina a parte.

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Obteremos este resultado: Texto em negrito

Que d o seguinte efeito: Texto em itlico

11/10/2010 Texto em itlico

Manual de HTML - Manual completo

Isto daria: Isto s est em negrito e isto em negrito e itlico

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Cor, tamanho e tipo de letra

Manual de HTML - Manual completo

Este texto maior

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Pode-se ver uma possvel soluo do exerc c io neste link.

Atributos para pginas

Pode-se ver o efeito de c oloc ar este fundo em uma pgina a parte.

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Que tem como resultado: Elemento Elemento Elemento Elemento 1 2 3 4

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Manual de HTML - Manual completo

I Ordena o por nmeros romanos em maisc ulas

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Manual ; &Oc irc de HTML - Manual completo

Manual de HTML - Manual completo

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Links externos, de correio e para arquivos

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Manual de HTML - Manual completo

Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com