Manual de HTML

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 descobrir a linguagem utilizada para a criao de pginas web: o Hyper Text Markup Language, mais conhecido como HTML. princpio, 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 peculiar de dar formatos aos textos e imagens que pretendemos ver por meio de um navegador. Antes de comearmos 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 bsicos necessrios para a criao de um web site. E tambm lhe permitir acessar este manual j com alguns conhecimentos de base imprescindveis sobre HTML, alm de lhe deixar bem claro o que seu conhecimento contribui em relao ao simples uso de editores HTML. As pessoas que enfocamos neste manual so todas aquelas que com conhecimentos mnimos de informtica, desejam fazer mundialmente pblico uma mensagem, uma idia ou uma informao, usando para isso o meio mais prtico, econmico e atual: a Internet. O que se necessita como base para se obter um bom aprendizado (alm de ler o manual Desde zero) : Saber escrever com um teclado Saber manusear um mouse Ter vontade de aprender O que se obter depois de haver passado por estes captulos: Capacidade para criar e publicar seu prprio site web com um mnimo de qualidade Conhecimentos de todo tipo sobre as tecnologias e ferramentas empregadas no mbito da Rede Possivelmente um interesse ou um gostar que pode se converter em paixo, e terminar em alguns casos, sendo um vcio 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 fcil como clicar 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 escrevem as pginas web. As pginas web podem ser vistas pelo usurio mediante um tipo de aplicao chamada navegador (browser). Podemos dizer portanto,
que o HTML a linguagem usada pelos navegadores para mostrar as pginas webs ao usurio, sendo hoje em dia a interface 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 criou a princpio com objetivos de divulgao. Porm, no se pensou que a web chegaria a ser uma rea de cio com carter multimdia, de modo que, o HTML se criou sem dar respostas a todos os possveis usos que lhe dariam posteriormente e ao todo coletivo de gente que o utilizariam no futuro. Entretanto, frente a este deficiente planejamento, com o tempo, foram se incorporando modificaes, 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 evoluo to anrquica do HTML, trouxe toda uma srie de incovenientes e deficincias que tiveram que ser superadas com a introduo de outras tecnologias acessrias capazes de organizar, optimizar e automatizar o funcionamento das webs. Exemplos que podem soar como conhecidos so as CSS, JavaScript ou outros. Veremos mais adiante em que consistem algumas delas. Alguns dos problemas que acompanham ao HTML a diversidade de navegadores presentes no mercado, os quais no so capazes de interpretar o mesmo cdigo de uma maneira unificada. Isto obriga ao webmaster a, uma vez criada sua pgina, comprovar que esta pode ser lida satisfatoriamente por todos os navegadores, ou pelo menos, pelos mais utilizados. Alm do navegador necessrio para ver os resultados de nosso trabalho, necessitamos evidentemente outra ferramenta capaz 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. recomendvel usar o bloco de notas que vem no Windows, ou outro editor de textos simples. No entanto, h de ter cuidado com alguns editores mais complexos como Wordpad ou MicrosoftWord, pois colocam seu prprio cdigo especial ao salvar as pginas e como o HTML unicamente texto plano, poderemos ter problemas com isso. Existem outros tipos de editores especficos para a criao de pginas web, os quais oferecem muitas facilidades que nos permitem aumentar nossa produtividade. Porm, aconselhvel princpio utilizar uma ferramenta, o mais simples possvel para poder prestar a mxima ateno ao nosso cdigo e familiarizarmos o antes possvel com ele. Logo mais adiante, ganharemos tempo ao utilizarmos os editores mais versteis. Par ter mais claro todo o tema de editores e os tipos que existem, visite os artigos: Editores de HTML Bloco de notas Tambm se pode acessar a descries de editores mais complexos que o Bloco de notas, porm mais potentes como o Homesite. importante ter claro tudo isso visto que em funo de seus objetivos, pode ser que mais do que aprender HTML, resulte mais interessante aprender o uso de uma aplicao 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 com extenso .html, por exemplo, minhapagina.html. Conselho: Utilize sempre a mesma extenso em seus arquivos HTML. Isso evitar que voc se confunda ao escrever os nomes dos seus arquivos umas vezes com .html e outras com .htm. E se voc trabalha com uma equipe em um projeto, ainda mais importante que todos estejam de acordo com a mesma extenso.
Sintaxes do HTML
O HTML uma linguagem que baseia sua sintaxe em um elemento de base que chamamos etiqueta (tag). A etiqueta apresenta frequentemente duas partes: Uma abertura de forma geral <etiqueta> Um fechamento do tipo </etiqueta> Tudo que estiver includo no interior desta etiqueta sofrer as modificaes que caracterizam a esta etiqueta. Como por exemplo: As etiquetas <b> e </b> definem um texto em negrito. Se em nosso documento HTML escrevemos uma frase com o seguinte cdigo:
<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 documento HTML deve estar delimitado pela etiqueta <html> e </html>. Dentro deste documento, podemos ainda distinguir duas partes principais: O cabealho, delimitado por <head> e </head> onde colocaremos etiquetas de ndole informativo como por exemplo o ttulo de nossa pgina. O corpo, delimitado pelas etiquetas <body> e </body>, que ser onde colocaremos nosso texto e imagens delimitados por sua vez por outras etiquetas como as que vimos anteriormente. O resultado um documento com a seguinte estrutura:
<html> <head>
Etiquetas e contedos do cabealho Dados que no aparecem em nossa pgina mas que so importantes para catalog-la: Ttulo, palavras-chaves, etc
</head>
<body>
Etiquetas e contedo do corpo 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 com qualquer tipo de combinao entre maisculas e minsculas. Ou seja, <HTML> ou <HtMl> so a mesma etiqueta. Entretanto, aconselhvel acostumar-se a escrev-las em minscula j que outras tecnologias que podem conviver com nosso HTML (XML por exemplo) no so to permissivas e nunca est mal ter bons costumes desde o princpio para evitar falhos triviais no futuro.
Sua primeira pgina

Podemos j com estes conhecimentos, e mais algum outro, criar nossa primeira pgina. Para isso, abra seu editor de textos e, copie e cole 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 com extenso .html ou .htm em seu disco rgido. Para isso, acessamos no menu "Arquivo" e selecionamos a opo "Salvar como". Na janela escolhemos o diretrio onde desejamos salv-lo e colocaremos 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 documento HTML criado, podemos ver o resultado obtido atravs de um navegador. Chegado a este ponto, conveniente, insistir no fato de que nem todos os navegadores so idnticos. Infelizmente, os resultados de nosso cdigo podem mudar de um para outro, sendo por isso aconselhvel visualizar a pgina em vrios navegadores. Geralmente usam-se Internet Explorer e Netscape como referncias j que so os mais extensos. Na verdade, no momento em que estas linhas so escritas, 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
nos proporcionar, pode resultar muito importante para ns. Por outro lado, parece que j se tornou pblica a inteno do Netscape de desviar um pouco seus negcios para outros rumos e abandonar esta chamada "luta de navegadores" na qual estava recebendo 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, selecionar "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 encontrar o arquivo que desejamos abrir. A coisa no mais difcil com o Netscape. Neste caso, temos de ir tambm barra de menu principal e selecionarmos File e logo, Open File. A mesma janela de busca nos permitir examinar o contedo de nosso PC at dar com o arquivo procurado.
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 comeo. E que em pouco tempo, j ver como ser capaz de melhorar sensivelmente. Observe a parte superior esquerda da janela do navegador e poder comprovar a presena do texto delimitado pela etiqueta <title>. Esta uma das funes desta etiqueta, cujo principal incubncia o de servir de referncia nos motores de busca como Altavista ou Yahoo.
Por outro lado, os elementos que colocamos entre a etiqueta <body> e </body> se podem ver no espao reservado para o corpo da pgina. Podemos ver a pgina do exemplo em funcionamento aqui. Se agora dermos um clique no boto direito do mouse sobre a pgina e selecionarmos "Ver cdigo fonte" (ou View page source), veremos como que numa janela acessria aparece o cdigo de nossa pgina. Este recurso de extrema importncia j que nos permite ver o tipo de tcnicas empregadas por outros para a confeco de suas pginas. Com tudo isso assimilado j estamos em condies de aprofundarmos um pouco mais na descrio 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
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 captulos anteriores apresentamos a ttulo de exemplo, algumas etiquetas que permitem dar formato ao nosso texto. Neste captulo veremos com mais detalhe, as etiquetas mais amplamente utilizadas e exemplificaremos algumas delas posteriormente. Formatar um texto passa por tarefas to evidentes como definir os pargrafos, justific-los, introduzir marcadores, 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 branco antes de continuar com o resto do documento. Podemos tambm utilizar a etiqueta <br>, da qual no existe seu fechamento correspondente (</br>), para realizar um simples enter, com 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 comprovar que mudar de linha em nosso documento 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 com a etiqueta correspondente. Os pargrafos delimitados por etiquetas <p> podem ser facilmente justificados esquerda, ao centro ou direita, especificando tal justificao 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 funcionamento 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 escreveramos:
<p align="left">Texto alinhado esquerda</p>
O resultado seria: Texto alinhado esquerda
Para uma justificao ao centro:

<p align="center">Texto alinhado ao centro</p>
Que seria: Texto alinhado ao centro
Para justificar direita:

<p align="right">Texto alinhado direita</p>
Cujo efeito seria: Texto alinhado direita
Como se v, em cada caso o atributo align toma determinados valores que so escritos entre aspas. Em algumas ocasies necessitamos especificar alguns atributos para o funcionamento correto da etiqueta. Em outros casos, o prprio navegador toma um valor definido por padro. Para o caso 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 comuns, que veremos mais adiante, entre as quais se introduzem texto ou imagens, costumam 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 cada uma de nossas etiquetas utilizando a etiqueta <div>. Esta etiqueta por si s no serve para nada. Tem que estar acompanhada do atributo align e o que nos permite alinhar qualquer elemento (pargrafo ou imagem) da maneira que ns desejarmos. Assim, o cdigo: <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> marca divises nas quais definimos um mesmo tipo de alinhado. Exemplo prtico: Para praticar um pouco o que acabamos de ver, vamos propor um exerccio que se pode resolver no seu computador. Simplesmente queremos construir uma pgina que tenha, por esta ordem:
2 pargrafos centralizados 3 pargrafos direita Um salto triplo de linha 1 pargrafo alinhado esquerda No vamos escrever nesta ocasio o cdigo fonte do exerccio. Podemos v-lo em funcionamento em nosso navegador e na janela podemos obter o cdigo fonte selecionando no menu Exibir a opo Cdigo fonte. Cabealhos Existem outras etiquetas para definir pargrafos especiais, formatados como ttulos. So os cabealhos ou Header em ingls. Como dissemos, so etiquetas que formatam o texto como um ttulo, para o qual atribuem um tamanho maior de letra e colocam o texto em negrito. Existem vrios tipos de cabealhos que se diferenciam no tamanho da letra que utilizam. A etiqueta em concreto a <h1>, para os cabealhos maiores, <h2> para os de segundo nvel e assim, at <h6> que o cabealho menor. Os cabealhos implicam tambm uma separao em pargrafos, portanto, tudo o que for escrito dentro de <h1> e </h1> (ou qualquer outro cabealho) ser colocado em um pargrafo independente. Podemos ver como se apresentam alguns cabealhos a seguir:
<h1>C abealho de nvel 1</h1>
Ser visto dessa maneira na pgina:
Cabealho de nvel 1
Os cabealhos, como outras etiquetas de html, suportam o atributo align. Vejamos um exemplo de cabealho de nvel 2 alinhado ao centro:
<h2 align="center">C abealho de nvel 2</h2>
Ser visto dessa maneira na pgina:
Cabealho de nvel 2
Outro exerccio interessante construir uma pgina web que contenha todos os cabealhos 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 de de de de nvel nvel nvel nvel 1</h1> 2</h2> 3</h3> 4</h4>
<h5>C abealho de nvel 5</h5> <h6>C abealho de nvel 6</h6> </body> </html>
Pode-se ver o exerccio 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 organizao dos pargrafos, um dos aspectos primordiais da formatao de um texto, o da prpria letra. muito comum e prtico, apresentar o texto ressaltado em negrito, itlico e outros. Paralelamente, o uso de ndices e subndices vital para a publicao de textos cientficos. Tudo isso e muito mais, possvel por meio do HTML a partir de uma srie de etiquetas entre as quais vamos destacar algumas. Negrito Podemos escrever o texto em negrito o incluindo dentro das etiquetas <b> e </b> (bold). Esta mesma tarefa desempenhada por <strong> e </strong> sendo ambas equivalentes. Ns nos inclinamos pelas primeiras por uma simples razo de esforo. Escrevendo um cdigo 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 caso existem duas possibilidades, uma curta: <i> e </i> (italic) e outra um pouco mais longa: <em> e </em>. Neste manual, e na maioria das pginas que se v por a, normal encontrar com a primeira forma que sem dvida mais simples para escrever e para se lembrar. Abaixo, um exemplo de texto em itlico:
<i>Texto em itlico</i>
Que d o seguinte efeito:
Que d o seguinte efeito: 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 com muita precauo visto que os links hipertextos vo, a no ser que se indique o contrrio, sublinhados com o que podemos confundir o leitor e afast-lo do verdadeiro interesse de nosso texto. Subscrito e sobrescrito Este tipo de formato de extrema utilidade para textos cientficos. As etiquetas empregadas so: <sup> e </sup> para os sobrescritos <sub> e </sub> para os subscritos 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 heterociclo alergeno enriquecido. Combinar etiquetas Todas estas etiquetas, incluindo as que j vimos e as que ainda vamos ver, podem ser combinadas 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
Cor, tamanho e tipo de letra

Apesar de que por razes de homogeneidade e simplicidade de cdigo estes tipos de formatos so controlados atualmente por folhas de estilo cascata (das quais j teremos tempo de falar), existe uma forma clssica e direta de definir cor, tamanho e tipo de letra de um determinado texto. Isto se faz a partir da etiqueta <font> e seu fechamento correspondente. Dentro desta etiqueta devemos especificar os atributos correspondentes a cada um destes parmetros que desejamos definir. A seguir comentamos os atributos principais 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 completamente e mostram o texto com a fonte que utilizam. Deve-se ter cuidado com este atributo j que cada usurio, dependendo da plataforma que utilize, pode no dispor dos mesmos tipos de letra que ns com o que, se ns escolhemos um tipo do que no dispe, o navegador se ver forado a mostrar o texto com a fonte que utiliza por padro (que costuma ser Times New Roman). Para evitar isso, dentro do atributo costuma-se selecionar vrios tipos de letras separados por vrgulas. Neste caso, o navegador comprovar que dispe do primeiro tipo numerado e se no for assim, passar para o segundo e assim sucessivamente at encontrar um tipo que possua ou ento, at acabar a lista e colocar a fonte padro. Vejamos um exemplo: <font face="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 crescente. Escolheremos 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 descer nesta escala de tamanhos por meio do signo + ou Desse modo se definimos nosso atributo como size="+1" o
tamanhos por meio do signo + ou - . Desse modo, se definimos nosso atributo como size= +1 o que queremos dizer que aumentamos um nvel o tamanho da letra. Se estvamos escrevendo previamente em 3, passaremos automaticamente a 4. Os tamanhos reais que vermos na tela dependero da definio e do tamanho da fonte escolhido 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 acabar sendo embaraosa para ns em mais de uma ocasio, j que em muitos casos desejaremos que o tamanho do texto permanea constante para que este caiba em um determinado espao. Veremos em seu momento que esta pr-fixao do tamanho pode ser realizada pelas folhas de estilo em cascata. Atributo cor A cor do texto pode ser definida atravs do atributo cor. Cada cor por sua vez definida por um nmero hexadecimal que est composto por trs partes. Cada uma destas partes representa a contribuio do vermelho, verde e azul cor em questo. Por outro lado possvel definir de uma maneira imediata algumas das cores mais freqentemente usadas para as que se criaram um nome mais memotcnico: Nombre Color Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal White Yellow
<font color="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 capazes de criar um texto formatado de uma forma realmente elaborada. Colocamos ento em prtica tudo o que aprendemos nestes captulos fazendo um exerccio consistente em uma pgina que tenha as seguintes caractersticas: Um ttulo com cabealho de nvel 1, em itlico e na cor verde oliva. Um segundo ttulo com cabealho de nvel 2, tambm na cor verde oliva. Todo texto da pgina dever apresentar-se com uma fonte diferente da fonte padro. Por l "C i S MS" d j i l
exemplo, "Comic Sans MS" e no caso de que esta no esteja no sistema, que se coloque a fonte "Arial". Pode-se ver uma possvel soluo do exerccio neste link.
Atributos para pginas

As pginas HTML podem ser construdas com uma variedade de atributos que lhe podem dar um aspecto pgina muito personalizado. Podemos definir atributos como a cor de fundo, a cor do texto ou dos links. Estes atributos se definem na etiqueta <body> e, como dizamos so gerais a toda a pgina. O melhor para explicar seu funcionamento v-los um a um. Atributos para fundos Bgcolor: especificamos uma cor de fundo para a pgina. No captulo anterior aprendemos a construir qualquer cor, com seu nome ou seu valor RGB. A cor de fundo que podemos atribuir com bgcolor uma cor plana, ou seja, a mesma para toda a superfcie do navegador. Background: serve para indicar a colocao de uma imagem como fundo da pgina. Nos captulos mais adiante, veremos como se inserem imagens com HTML e os tipos de imagens que se podem utilizar. Exemplo de fundo Vamos colocar esta imagem no fundo da pgina.
A imagem chama-se fundo.jpg e supomos que se encontra no mesmo diretrio que a pgina. Neste caso se colocaria a seguinte etiqueta <body>
<body background="fondo.jpg">
Pode-se ver o efeito de colocar 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.
d t
Cor do texto 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 cor 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 facilmente. Para isso, eles costumam aparecer sublinhados e com uma cor 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 cor que tero os links que j visitamos. Por padro sua cor roxa. Esta cor dever ser um pouco menos viva que a cor dos links normais. Alink: a cor dos links ativos. Um link est ativo no preciso momento em que se clica. s vezes difcil perceber quando um link est ativo porque no momento em que se ativa, porque o estamos clicando e nesse caso, 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 cor de fundo seja preta, e as cores dos textos e dos links sejam claros. Colocaremos a cor do texto branca e os links amarelos, mais ressaltados os que no tenham sido visitados e menos ressaltados os que j tenham sido. Para isso, escreveramos 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 espaos de margens nas pginas, o que muito til para eliminar as margens em branco que aparecem nos lados, em cima e embaixo da pgina. Estes atributos so diferentes para o Internet Explorer e para o Netscape Navigator, por isso, devemos utiliz-los todos se queremos que todos os navegadores os interpretem perfeitamente. Leftmargin: para a indicar a margem nos lados da pgina. Vlido para Internet Explorer. Topmargin: para indicar a margem acima e abaixo da pgina. Para Internet Explorer. Marginwidth: a contrapartida de leftmargin para Netscape. (margem nos lados) Marginheight: igual ao topmargin, mas para Netscape. (margem acima e abaixo) Um exemplo de pgina sem margem a prpria pgina de criarweb.com que voc est visitando atualmente. (pelo menos na hora de escrever este artigo). Alm disso, vamos ver outra pgina sem margens, caso algum necessite 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 branco 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.
Listas I
So realmente notveis as possibilidades que o HTML nos oferece 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 cabealhos ou os ttulos. As listas so utilizadas para citar, numerar e definir objetos. Tambm so utilizadas correntemente para deslocar o comeo da linha para a direita. Podemos distinguir trs tipos de listas: Listas desordenadas Listas ordenadas Listas de definio Veremos agora detalhadamente uma por uma: Listas desordenadas So delimitadas pelas etiquetas <ul> e </ul> (unordered list). Cada um dos elementos da lista citado por meio de uma etiqueta <li> (sem fechamento, ainda que exista nenhum inconveniente em coloc-lo). Ento, fica 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 marcador empregado para cada elemento. Para isso devemos especific-lo por meio do atributo type includo dentro da etiqueta de abertura <ul>, se queremos que o estilo seja vlido para toda a lista, ou dentro da etiqueta <li> se queremos especificar um s elemento. A sintaxe do seguinte tipo: <ul type="tipo de marcador"> E o tipo de marcador pode ser um dos seguintes: Circle 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.
Vamos ver um exemplo de lista com um quadrado ao invs de uma bolinha e, no ltimo elemento, colocaremos um crculo. Para isso, vamos colocar 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 fechamento. Cada elemento ser igualmente precedido 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 oferecem a possibilidade de modificar o estilo. Concretamente, nos possvel especificar o tipo de numerao empregado escolhendo entre nmeros (1,2,3...), letras (a,b,c...) e suas maisculas (A,B,C...) e nmeros romanos em suas verses maisculas (I,II,III...) e minsculas (i,ii,iii...). Para realizar tal seleo temos de utilizar, como para o caso 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 AP l t i l d lf b t
A Por letras maisculas do alfabeto i Ordenao por nmeros romanos em minsculas I Ordenao por nmeros romanos em maisculas
Nota: Lembramos que em alguns navegadores no funciona a opo de mudar o tipo de marcador.
Pode ser que em algum caso desejemos comear nossa numerao por um nmero ou letra que no tem porque ser necessariamente o primeiro de todos. Para resolver esta situao, podemos utilizar um segundo atributo, start, que ter um nmero como valor. Este nmero, que por padro 1, corresponde ao valor a partir do qual comeamos a definir nossa lista. Para o caso das letras ou dos nmeros romanos, o navegador se encarrega de fazer a traduo do nmero letra correspondente. 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 comeando pelo 10 x. Elemento x xi. Elemento xi
Listas III
Terminamos o assunto das listas estudando as listas de definio. Veremos tambm a combinao de listas.
Listas de definio Cada elemento apresentado junto com sua definio. A definio principal <dl> e </dl> (definition list). As etiquetas do elemento e sua definio so <dt> (difinition term) e <dd> (definition definition) respectivamente. 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: Dicionrio da Lngua Portuguesa Aougue Estabelecimento onde se vendem carnes frescas Colheita Ato de colher os produtos agrcolas Observe que em cada linha <dd> est deslocada da direo da esquerda. Este tipo de etiquetas usado muitas vezes com o propsito de criar textos mais ou menos deslocados da direo da esquerda. O cdigo:
<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 deslocamento Segundo nvel de deslocamento Terceiro nvel de deslocamento Combinando listas Nada nos impede de utilizar todas estas etiquetas de forma combinada como vimos em outros casos. Dessa forma, podemos conseguir listas mistas como, 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>
</ol> </ul>
Dessa forma criamos uma lista como 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 caracteres distintos. A linguagem HTML nos oferece um mecanismo pelo qual podemos estar seguros que uma srie de caracteres raros sero bem vistos em todos os computadores do mundo, independentemente de seu jogo de caracteres. Estes conjuntos so os caracteres especiais. Quando queremos pr um desses caracteres numa pgina, devemos substitu-lo por seu cdigo. Por exemplo, a letra "" (a minscula acentuada) se escreve: "" de modo que a palavra pgina seria escrita numa pgina HTML desse modo: p&aamp;aacute;gina . Caracteres especiais bsicos Na realidade estes caracteres se usam em HTML para no confundir um incio ou final de etiqueta, umas aspas ou um & com seu correspondente caracter. < & < & > " > "
Caracteres especiais do HTML 2.0 Á É Í Ó Ú á é í ó ú Ä Ë À È Ì Ò Ù à è ì ò ù Â Ê
Ï Ö Ü ä ë ï ö ü Ã Ñ Õ ã ñ õ Ø ø Ð ð ß
Î Ô Û â ê î ô û å Å Ç ç Ý ý ÿ Þ þ Æ æ
Caracteres especiais do HTML 3.2 ¼ ½ ¾ © ® ª ² ³ ¹ ¯ µ ¶ · ° ¸ ¿ ¡ £ ¥ § ¤ ¦ « ¬ º ´ ¨ ± »
Outros caracteres especiais × ÷ ¢ €

Links em HTML
At aqui, vimos que uma pgina web um arquivo HTML no qual podemos incluir, entre outras coisas, textos formatados ao nosso gosto e imagens que veremos mais adiante. Do mesmo modo, um web site poder ser considerado como um conjunto de arquivos, principalmente pginas HTML e imagens, que constituem o contedo ao qual o navegante tem acesso. Entretanto, no poderamos falar de navegante ou de navegao se estes arquivos HTML no estivessem devidamente conectados 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 contedos dos arquivos introduzindo referncias sob a forma de links que permitem um acesso rpido informao desejada. Serviria pouco 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 facilmente detectado em uma pgina. Basta deslizar o cursor do mouse sobre as imagens ou o texto e ver como muda de sua forma original transformando-se por regra geral em uma mo com um dedo indicador. Adicionalmente, estes links costumam ir, no caso dos textos, coloridos e sublinhados para que o usurio no tenha dificuldade em os reconhecer. Se no especificamos o contrrio (j teremos a ocasio de explicar como), estes links-texto estaro sublinhados e coloridos de azul. No caso das imagens que servem de link, veremos que esto delimitadas por uma marcao azul por padro. Para colocar um link, utilizaremos as etiquetas <a> e </a>. Dentro da etiqueta de abertura devemos especificar 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">contedo</a> Sendo o contedo um texto ou uma imagem. a parte da pgina que se colocar ativa e onde deveremos clicar para acessar ao link. E o destino por sua vez, ser uma pgina, um correio eletrnico ou um arquivo. Em funo 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 criar uma mensagem de correio dirigido a um endereo. Links com arquivos: Para que os usurios possam fazer download de arquivos.
Links internos
So os links q e apontam a m l ga dife ente dent o da mesma pgina Este tipo de link
So os links que apontam a um lugar diferente dentro da mesma pgina. Este tipo de link essencialmente utilizado em pginas onde o acesso aos contedos pode ser prejudicado devido ao grande tamanho da mesma. Mediante estes links, podemos oferecer aos visitantes a possibilidade de acessar rapidamente ao incio e ao final da pgina, ou tambm a diferentes pargrafos ou sees. Para criar um link deste tipo necessrio, alm do link origem propriamente dito, um segundo link que ser colocado no destino. Vejamos mais claramente como funcionam estes links com um simples exemplo: Suponhamos que queremos criar um link que aponte ao final da pgina. O primeiro a fazer ser colocar nosso link origem. Colocaremos e escreveremos da seguinte forma: <a href="#abaixo">Ir abaixo</a> Link com o final deste documento para que prove seu funcionamento: 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 especifica ao navegador que o link aponta a uma seo 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 caso, 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 criar pginas (arquivos) independentes com tamanhos mais reduzidos linkados entre eles por links locais (que veremos em seguida). Desta forma, evitamos o excesso de tempo de carregamento de um arquivo e a introduo de excesso de informao que possa desviar a ateno do usurio. Uma aplicao corrente destes links consiste em colocar um pequeno ndice ao princpio de nosso documento onde introduzimos links origem s diferentes sees. Paralelamente, ao final de cada seo introduzimos um link que aponta ao ndice de forma que possamos guiar o navegante na busca da informao til para ele.
Links locais
Como dissemos, um site web est constituido de pginas interconexas. No captulo anterior vimos como linkar diferentes sees dentro de uma mesma pgina. Resta-nos estudar a maneira de relacionar os distintos documentos HTML que compem nosso site web. Para criar este tipo de links, temos que criar uma etiqueta da seguinte forma: <a href="arquivo.html">contedo</a> Por regra geral, para uma melhor organizao, os sites costumam estar ordenados por diretrios. Estes diretrios costumam conter diferentes sees da pgina, imagens, audios... por isso que em muitos casos no nos ser vlido especificar o nome do arquivo, e sim, o diretrio onde nosso arquivo.html est alojado. Se voc j tiver trabalhado com MS-DOS no ter nenhum problema para compreender o modo de funcionamento. Somente dever ter cuidado em usar a barra "/" no lugar da contra-barra "\".
Para aqueles que no sabem como mostrar um caminho de um arquivo, aqui vai uma srie de indicaes que lhes vo ajudar a compreender a forma de express-los. No nada difcil e com um pouco de prtica o far praticamente sem pensar. 1. H de situar mentalmente no diretrio no qual se encontra a pgina com o link. 2. Se a pgina destino est em um diretrio includo dentro do diretrio no qual nos encontramos, temos de marcar o caminho numerando cada um dos diretrios pelos quais passamos at chegar ao arquivo e separando-os pelo smbolo barra "/". No final, obviamente, escrevemos o arquivo. 3. Se a pgina destino encontra-se em um diretrio que inclui o da pgina com o link, temos que escrever dois pontos seguidos e uma barra "../" tantas vezes quantas forem os nveis que subirmos na hierarquia de diretrios, at chegar no diretrio onde est localizado o arquivo destino. 4. Se a pgina encontra-se em outro diretrio no includo nem incluente do arquivo origem, teremos que subir com a regra 3 por meio de ".." at encontrar o diretrio que englobe o diretrio que contm a pgina destino. A seguir faremos como a regra 2. Escreveremos 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 locais podem por sua vez j apontar mais precisamente a uma seo concreta, 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#secao">conteudo</a> Como para os links internos, neste caso temos que marcar a seo com 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 encontram fora do nosso site web, ou seja, qualquer outro documento que no faz parte de nosso site. Este tipo de link muito comum e no representa nenhuma dificuldade. Simplesmente colocamos no at ib to HREF de nossa etiq eta <A> a URL o ende eo da pgina com a q al q e emos
no atributo HREF de nossa etiqueta <A> a URL ou endereo da pgina com a qual queremos linkar. Ser algo parecido a isto: <a href=http://www.yahoo.com.br>ir a yahoo.com.br</a> Somente cabe destacar que todos os endereos web (URLs) comeam por http:// . Isto indica que o protocolo pelo qual se acessa HTTP, o utilizado na web. No devemos nos esquecer de coloc-lo porque seno os links sero tratados como links locais em nosso site. Outra coisa interessante que no temos necessariamente que linkar com uma pgina web com o protocolo HTTP. Tambm podemos acessar recursos atravs de outros protocolos como o FTP. Em tal caso, os endereos dos recursos no comearo com http:// e sim por ftp://. Links a endereos de correio Os links a endereos de correio so aqueles em que ao clic-los nos abre uma nova mensagem de correio eletrnico dirigido a um determinado endereo de mail. Estes links so muito habituais nas pginas web e a maneira mais rpida de oferecer ao visitante uma via para o contato com o proprietrio da pgina. Para colocar um link dirigido a um endereo de correio colocamos mailto: no atributo href do link, seguido do endereo de correio ao qual se deve dirigir o link. <a href="mailto:juliana@criarweb.com">juliana@criarweb.com</a> Este link pode ser visto aqui: juliana@criarweb.com
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 endereo do correio eletrnico do destinatrio, tambm podemos colocar no link o assunto da mensagem. Isto se consegue colocando depois do endereo de correio uma interrogao, a palavra subject, o sinal de igual (=) e o assunto em concreto. <a href="malito:juliana@criarweb.com?subject=contato atravs da pgina">juliana@criarweb.com</a> Podemos colocar outros atributos de mensagem com uma sintaxe parecida. Neste caso indicamos tambm que o correio deve ir com cpia a colabore@criarweb.com. <a href="mailto:juliana@criarweb.com?subject=contato atravs da pgina&cc=colabore@criarweb.com"> juliana@criarweb.com</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 complicao para o usurio novato. O mecanismo o mesmo que conhecemos nos links locais e nos remotos, com a nica particulariedade de que em vez de estar dirigidos para uma pgina web, est dirigido para um arquivo de outro tipo. Se queremos linkar com um arquivo meu_arquivo.zip que se encontra no mesmo diretrio que a pgina, escreveramos um link assim:
<a href="meu_arquivo.zip">Baixar meu_arquivo.zip</a> Se clicamos um link deste tipo nosso navegador baixar o arquivo, fazendo a pergunta tpica se: "Deseja abrir o arquivo ou salv-lo no computador?".
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) continuaremos fazendo da mesma maneira. O navegador, se reconhece o tipo de arquivo, o responsvel de abr-lo utilizando o conectador adequado para isso. Assim, se por exemplo linkamos com um PDF colocar o programa Acrobat Reader em funcionamento para mostrar os contedos. Se linkamos com um mundo VRML colocar em funcionamento 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 aspectos mais vistosos e atrativos das pginas web o grafismo. A introduo em nosso texto de imagens pode nos ajudar a explicar mais facilmente nossa informao e dar um ar muito mais esttico. Porm, o abuso pode nos conduzir a uma sobrecarga que se traduz em uma distrao para o navegante, quem ter mais dificuldade em encontrar a informao necessria, e um maior tempo para carregar a pgina o que pode ser de um efeito nefasto se nosso visitante no tem uma boa conexo ou se um pouco impaciente. Neste captulos no explicaremos como criar, nem como tratar as imagens, unicamente diremos que para isso utilizam-se aplicaes como Paint Shop Pro, Photoshop ou Corel Draw. Tambm no explicaremos as particularidades de cada 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, principalmente GIF (para desenhos) ou JPG (para fotos). Estes arquivos podem ser criados por ns mesmos ou podem ser baixados gratuitamente em sites web especializados. Sendo assim, nestes primeiros captulos nos limitaremos a explicar como inserir e alinhar devidamente em nossa pgina uma imagem j criada. A etiqueta que utilizaremos para inserir uma imagem <img> (image). Esta etiqueta no possui seu fechamento correspondente e nela temos de especificar obrigatoriamente o paradeiro de nosso arquivo mediante o atributo src (source). A sintaxe fica ento da seguinte forma: <img src="caminho para o arquivo">
Para expressar o caminho, faremos da mesma forma que vimos para os links. As regras continuam sendo as mesmas, o nico que muda que, no lugar de uma pgina destino, o destino um arquivo grfico. 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, colocaremos uma brevssima descrio da imagem. Esta etiqueta no indispensvel, mas apresenta vrias utilidades. Primeiramente, durante o processo de carregamento da pgina, quando a imagem no tiver sido ainda carregada, o navegador mostrar esta descrio, com a qual o navegante poder ter uma idia do que se trata neste caso. Isto no to trivial se temos em conta que alguns usurios navegam pela rede com uma opo do navegador que desativa a amostra de imagens, com o que tais pessoas podero sempre saber de que se trata o grfico e eventualmente mudar o modo com imagens para visualizar. Alm disso, determinadas aplicaes para incapacitados ou para telefones vocais que no mostram imagens oferecem a possibilidade de l-las, o que nunca demais pensar nestes coletivos. Em geral, podemos considerar como aconselhvel o uso deste atributo salvo para imagens de pouca importncia e absolutamente indispensvel se a imagem em questo serve de link. Atributos height e width Definem a altura e largura respectivamente da imagem em pixels. Todos os arquivos grficos possuem umas dimenses de largura e altura. Estas dimenses podem ser obtidas a partir do prprio designer grfico ou tambm, clicando com o boto direito sobre a imagem vista pelo navegador para logo escolher propriedades sobre o menu que se desdobra. O fato de explicitar em nosso cdigo as dimenses de nossas imagens ajuda ao navegador a confeccionar a pgina da forma que ns desejamos inclusive antes das imagens serem baixadas. Assim, se as dimenses das imagens tiverem sido proporcionadas, durante o processo de carregamento, o navegador reservar o espao correspondente a cada imagem criando uma planificao correta. O usurio poder comear a ler tranqilamente o texto sem que este se mova de um lado a outro cada vez que se carregue 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 necessrio para a imagem que estamos mostrando, com o que aumentamos o tempo de descarregamento de nosso documento desnecessariamente. importante insistir neste ponto j que muitos estreantes tm o pssimo costume de criar grficos pequenos redimensionando a imagem por meio desses atributos a partir de arquivos de tamanho descomunal. Temos que pensar que o tamanho de uma imagem com 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 particularmente til quando
Dessa forma, podemos re enquadrar nossa imagem se desejamos. particularmente til quando desejamos eliminar a borda que aparece quando a imagem serve de link. Em tal caso teremos que especificar border="0". Atributos vspace e hspace Serve para indicar o espao livre, em pixels, que tem que ser colocado entre a imagem e outros elementos que a rodeiam, como texto, outras imagens, etc. Atributo lowsrc Com este atributo podemos indicar um arquivo de baixa resoluo. Quando o navegador detecta que a imagem tem este atributo, primeiro descarrega e mostra a imagem de baixa resoluo (que ocupa muito pouco e que se transfere muito rpido). Posteriormente, descarrega e mostra a imagem de resoluo adequada (assinalada com o atributo src, que se supe que ocupar mais e que ser mais lenta de se transferir). Est atributo est em desuso, mesmo supondo uma vantagem considervel para que o descarregamento inicial 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 com diferentes atributos. Uma das vezes que saia deve ser mostrada com seu tamanho original e com uma borda de 3 pixels. Em outra ocasio a imagem aparecer sem borda, com sua mesma altura e com uma largura superior a original. Tambm mostraremos a imagem sem borda, com sua mesma largura e com uma altura superior a original. Por ltimo, mostraremos a imagem com uma altura e largura maiores que as originais, mas proporcionalmente igual que antes.
Vamos utilizar esta imagem para fazer o exerccio:
As dimenses originais da imagem so 28x21, o cdigo 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="Achatada" border="0"> width="28" height="51" alt="Esticada" border="0"> width="56" height="42" alt="Dobro grande" border="0">
Informe de Miguel Angel Alvarez - Traduo de JML
Informe de Miguel Angel Alvarez e-mail: juliana@criarweb.com
Traduo de JML
Alinhamento de imagens com HTML

Vimos em seu momento o atributo align que nos permitia alinhar o texto direita, esquerda ou no centro de nossa pgina. Dissemos que este atributo no era exclusivo da etiqueta <p> e sim, que podia ser encontrado em outro tipo de etiquetas. Sendo assim, <img> uma dessas etiquetas que aceitam este atributo, mesmo sendo, neste caso, o funcionamento 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 caso, o que incluiremos dentro desta etiqueta ser a imagem no lugar do texto: Este cdigo mostrar a imagem no centro: <div align="center"><img src="logo.gif"></div> Ficaria assim:
Entretanto, j dissemos que a etiqueta <img> pode aceitar o atributo align. Neste caso, 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, justificar a imagem do lado que desejamos uma vez que recheamos com texto o lado oposto. Dessa forma, incorporamos nossas imagens dentro do texto de uma maneira simples. Aqui se pode ver o tipo de cdigo a criar para obter tal efeito: <p> <img src="imagem.gif" align="right">Texto to extenso quanto quisermos para que cubra a parte esquerda da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla... </p> Ficaria assim: Texto to extenso quanto quisermos para que cubra a parte esquerda da imagem. Continuo colocando 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 cubra a parte direita da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla... </p> Ficaria assim:
Texto to extenso quanto quisermos para que cubra a parte direita da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla bla bla...
Se em algum momento desejarmos preencher esse espao lateral, podemos passar a uma zona livre introduzindo uma quebra de linha <br> dentro do qual acrescentaramos um atributo: clear Sendo ento, etiquetas do tipo: <br clear="left"> Pular verticalmente at encontrar a lateral esquerdo livre. <br clear="right"> Pular verticalmente at encontrar a lateral direita livre. <br clear="all"> Pular verticalmente at encontrar ambas laterais livres. Exemplo de clear: Texto to extenso quanto quisermos que cubra 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 vertical da imagem. Supomos que escrevemos uma linha ao lado de nossa imagem. Esta linha pode ficar, por exemplo acima, 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 adicionais 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 com o meio vertical da imagem. Absmiddle Ajusta a imagem ao meio absoluto da linha. Estas explicaes, que podem ser um pouco complicadas, sero mais facilmente assimiladas com um pouco mais de prtica. Falta explicar como introduzir debaixo da imagem um p de foto ou uma explicao. Para isso, teremos que ver antes de mais nada as tabelas, nos prximos captulos...
Formatos grficos para pginas web

O componente grfico das pginas web tem muita importncia, que o que faz com que estas seja vistosas e o que nos permite aplicar nossa criatividade 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 bsicas para o uso de arquivos grficos so simples, conhec-las, mesmo que seja ligeiramente, nos ajudar a criar 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 propiciando 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 ocupam 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 comprimir a imagem que utiliza cada formato o que os tornam ideais para um propsito ou outro. Adicionalmente, pode-se usar um terceiro formato grfico nas pginas web, o PNG. Este formato no tem tanta aceitao como o GIF ou o JPG, por vrias razes, entre elas: o desconhecimento do formato por parte dos desenvolvedores, que as ferramentas habituais para tratar grficos (como por exemplo, Photoshop) geralmente no suportam, e que os navegadores antigos tambm tm problemas para visualiz-las. Entretanto, o formato se comporta muito bem quanto a compreenso e a qualidade do grfico conseguinte, 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 caractersticas que so importantes e teis. Compresso: muito boa para desenhos, como 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 colocar as imagens sobre distintos fundos sem que se veja o quadrado onde est inserido o desenho, vendo em troca a silhueta do desenho em questo. Para criar um gif transparente devemos utilizar um programa de desenho grfico, com o qual podemos indicar que cores do desenho queremos que sejam transparentes. Geralmente, definimos a transparncia quando vamos salvar o grfico.
Parte desta imagem transparente
Cores: Com este formato grfico podemos utilizar conjuntos de 256 cores ou menos. Este um detalhe muito importante, visto que quanto menos cores utilizarmos na imagem, em geral, menos ocupar o arquivo. s vezes, mesmo utilizando menos cores em um grfico, este no perde muita qualidade, chegando a ser inaprecivel vista. Em alguns programas podemos modificar a quantidade de cores ao salvar o arquivo, em outros, fazemos enquanto criamos 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.
JPG Vejamos agora quais so as caractersticas fundamentais do formato JPG: Compresso: Tal como dissemos anteriormente, sua gama de compresso torna ideal este formato para salvar fotografias. Alm disso, com JPG podemos definir a qualidade da imagem, com qualidade baixa o arquivo ocupar menos, e vice-versa.
Uma fotografia com formato JPG
Transparncia: Este formato no tem possibilidade de criar reas transparentes. Se desejamos colocar uma imagem com uma rea que parea transparente procederemos assim: com nosso programa de desenho grfico faremos com que o fundo da imagem seja o mesmo que o da pgina onde queremos coloc-la. Em Uma tentativa de muitos casos, 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 grficos. Para isso, devemos fazer o seguinte: Para os arquivos GIF: Reduziremos o nmero de cores de nossa aquarela. Isto se faz com nosso editor grfico, 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 perca muito em seu aspecto visual.
JPG qualidade 0 3 KB
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 caractersticas da imagem com liberdade e facilidade. Photoshop 5.5 ou 6 um programa bastante recomendvel, pois incorpora uma opo que se chama "Salvar para Web" com a qual podemos definir as cores do gif, a qualidade do JPG e outras opes em vrias amostras. Assim, com todas as opes configurveis, vendo os resultados do tamanho do arquivo, podemos otimizar a imagem de uma maneira precisa com os resultados que desejamos. Tambm existem no mercado outros programas que nos Photoshop uma ferramenta excelente permitem otimizar estas imagens de maneira surpreendente. para otimizar arquivos. Vendo vrias Uma vez que criamos a imagem, a passamos por estes cpias podemos escolher a mais adequada. programas e nos comprimem 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 com os programas de edio grfica. Exemplos de otimizadores grficos: - WebGraphics Optimizer - ProJPG, GIF Imantion E com verses On-line: - GIF Wizard
As cores e HTML
As cores possuem um papel muito importante na composio de webs. So indicadas em valores RGB, ou seja, que para conseguir uma cor qualquer misturaremos quantidades de Vermelho, Verde e Azul. Os valores RBG so indicados em numerao hexadecimal, em base 16. (Os dgitos podem crescer at 16). Como no existem tantos dgitos numricos se utilizam as letras da A F. 0=0 1=1 2=2 3=3 4=4 5=5 6=6 7=7 8=8 9=9 A=10 B=11 C=12 D=13 E=14 F=15
Tabela de cor
Para conseguir uma cor, misturaremos valores desta maneira:
RRGGBB
Onde cada valor pode crescer desde 00 at FF. Exemplo: Como se mudaria a fonte para escrever em vermelho: <font color="#FF0000">Vermelho</font> Ao Atributo cor lhe damos um valor RGB em formato hexadecimal. O caractere # se coloca ao princpio 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 cores compatveis com a paleta de todos eles. A forma de conseguir isto limitando nossas cores aos que se podem conseguir 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 #000033 #003333 #006633 #009933 #00CC 33 #000066 #003366 #006666 #009966 #00C C 66 #000099 #003399 #006699 #009999 #00CC 99 #0000C C #0033C C #0066C C #0099C C #00C C CC #0000FF #0033FF #0066FF #0099FF #00C C FF
#00C C 00 #00FF00 #330000 #333300 #336600 #339900 #33C C 00 #33FF00 #660000 #663300 #666600 #669900 #66C C 00 #66FF00 #990000 #993300 #996600 #999900 #99C C 00 #99FF00 #C C 0000 #C C 3300 #C C 6600 #C C 9900 #C C CC 00 #C CFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFC C 00 #FFFF00
#00CC 33 #00FF33 #330033 #333333 #336633 #339933 #33CC 33 #33FF33 #660033 #663333 #666633 #669933 #66CC 33 #66FF33 #990033 #993333 #996633 #999933 #99CC 33 #99FF33 #C C0033 #C C3333 #C C6633 #C C9933 #C C C C 33 #C C FF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFC C 33 #FFFF33
#00C C 66 #00FF66 #330066 #333366 #336666 #339966 #33C C 66 #33FF66 #660066 #663366 #666666 #669966 #66C C 66 #66FF66 #990066 #993366 #996666 #999966 #99C C 66 #99FF66 #C C 0066 #C C 3366 #C C 6666 #C C 9966 #C CC C 66 #CC FF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFC C66 #FFFF66
#00CC 99 #00FF99 #330099 #333399 #336699 #339999 #33CC 99 #33FF99 #660099 #663399 #666699 #669999 #66CC 99 #66FF99 #990099 #993399 #996699 #999999 #99CC 99 #99FF99 #CC 0099 #CC 3399 #CC 6699 #CC 9999 #C C C C99 #C C FF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFC C 99 #FFFF99
#00C C CC #00FFC C #3300C C #3333C C #3366C C #3399C C #33C C CC #33FFC C #6600C C #6633C C #6666C C #6699C C #66C C CC #66FFC C #9900C C #9933C C #9966C C #9999C C #99C C CC #99FFC C #C C 00CC #C C 33CC #C C 66CC #C C 99CC #CC C C C C #C C FFC C #FF00C C #FF33C C #FF66C C #FF99C C #FFCC C C #FFFFC C
#00C C FF #00FFFF #3300FF #3333FF #3366FF #3399FF #33C C FF #33FFFF #6600FF #6633FF #6666FF #6699FF #66C C FF #66FFFF #9900FF #9933FF #9966FF #9999FF #99C C FF #99FFFF #C C 00FF #C C 33FF #C C 66FF #C C 99FF #C CC C FF #CC FFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCC FF #FFFFFF
Tabelas em HTML
Uma tabela um conjunto de clulas organizadas dentro das quais podemos alojar distintos contedos. princpio, poderia parecer que as tabelas so raramente teis e que podem ser utilizadas simplesmente para listar dados como 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 engenhoca. De fato, uma tabela nos permite organizar e distribuir os espaos da melhor forma. Pode nos ajudar a gerar textos em colunas como os jornais, prefixar os tamanhos ocupados por distintas sees da pgina ou colocar de uma maneira simples uma legenda a uma imagem. Pode ser que a princpio seja um pouco complicado trabalhar com estas estruturas mas, se desejamos criar uma pgina de qualidade, mais cedo ou mais tarde teremos que nos ver com elas e nos dar conta das possibilidades que nos oferecem. Para comear, nada mais simples do que pelo princpio: as tabelas so definidas pelas etiquetas <table> e </table> Dentro dessas duas etiquetas colocaremos todas as outras etiquetas, textos e imagens que d f d b l
daro forma e contedo tabela. As tabelas so descritas por linhas da esquerda para direita. Cada uma destas linhas definida por outra etiqueta e seu fechamento: <tr> e </tr> Ainda assim, dentro de cada linha, haver diferentes clulas. Cad uma dessas clulas ser definida por outro par de etiquetas:<td> e </td>. Dentro desta etiqueta ser onde colocaremos nosso contedo. Aqui temos um exemplo de estrutura de tabela: <table> <tr> <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 conhecer para criar as tabelas. Existem outras etiquetas, mas o que podemos conseguir com elas se pode conseguir tambm usando as que j vimos. Por exemplo, assinalamos a etiqueta <th>, que serve para criar uma clula cujo contedo esteja formatado como um ttulo ou cabealho da tabela. Na prtica, o que faz colocar em negrito e centralizado o contedo dessa clula, o que se pode conseguir aplicando as correspondentes etiquetas dentro da clula. Assim: <td align="center"><b>Contedo da clula</b></td> A partir desta idia simples, as tabelas adquirem outra magnitude quando lhes incorporamos toda uma bateria de atributos aplicados sobre cada tipo de etiquetas que as compem. Ao longo dos prximos captulos nos aprofundaremos no estudo desses atributos de forma a proporcionar-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 clulas. As clulas so delimitadas pelas etiquetas <td> ou pelas etiquetas <th> (se queremos texto em negrito e centralizado) e constituem um entorno independente do resto do documento. Isto quer dizer que: Podemos usar praticamente qualquer tipo de etiqueta dentro da etiqueta <td> para, desta forma, dar forma a seu contedo. As etiquetas situadas no interior da clula no modificam o resto do documento. As etiquetas de fora da clula no so tidas em conta por esta. Sendo assim, podemos especificar o formato de nossas clulas a partir de etiquetas introduzidas em seu interior ou mediante atributos colocados dentro da etiqueta de clula <td> ou tambm, em alguns casos dentro da etiqueta <tr> se desejamos que o atributo seja vlido para toda a
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 cascata que j teremos a oportunidade de abordar mais adiante. Vemos em seguida alguns atributos teis para a construo de nossas tabelas. Comeamos vendo alguns atributos que nos permite modificar uma clula em concreto ou toda uma linha. align Justifica o texto da clula da mesma forma que se fosse o de um pargrafo. valign Podemos escolher se queremos que o texto aparea acima (top), no centro (middle) ou abaixo (bottom) da clula. bgcolor D cor clula ou escolha de linha. bordercolor Define a cor da borda. Outros atributos que podem ser unicamente atribudos a uma clula e no ao um conjunto de clulas de uma linha so: background Permite-nos colocar um fundo para a clula a partir de um link a uma imagem. height Define a altura da clula em pixels ou porcentagem. width Define a largura da clula em pixels ou porcentagem colspan Expande um clula horizontalmente. rowspan Expande um clula verticalmente.
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 descritos so de grande utilidade. Concretamente, height e width nos ajudam a definir as dimenses de nossas clulas de uma forma absoluta (em pixel ou em pontos de tela) ou de uma forma relativa, ou seja, por porcentagens 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 clula do 80% da largura da tabela. H de ter em conta 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 ocasies o resultado que obtenhamos no seja o esperado. Concretamente, se o texto apresenta uma palavra excessivamente comprida 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 clula aumentar sua para poder mostrar todo o seu contedo. Analogamente se, por exemplo, definimos duas larguras distintas s clulas de uma mesma coluna,
Analogamente se, por exemplo, definimos duas larguras distintas s clulas de uma mesma coluna, o navegador no saber qual atender. por isso que conveniente ter bem claro desde o princpio como a tabela que queremos desenhar. No demais saber se pr-desenhamos no papel se a complexidade importante. O HTML em geral fcil, mas as tabelas podem converte-se em um verdadeiro quebra-cabea se no chegamos a compreende-las devidamente. Os atributos rowspan e colspan so tambm utilizados freqentemente. Graas a isso possvel expandir clulas fundindo estas com suas vizinhas. O valor que podem tomar estas etiquetas numrico. O nmero representa a quantidade de clulas fundidas. Assim, <td colspan="2"> Fundir a clula em questo com sua vizinha direita. Esta clula tem um colspan="2" Clula normal Do mesmo modo, <td rowspan="2"> Clula Normal Outra clula normal Outra clula
Esta clula tem rowspan="2", por isso tem fundida a clula abaixo.
A clula expandir para baixo fundindo-se com a clula inferior. O resto dos atributos apresentados apresenta uma utilidade e um uso bastante bvio. Por isso, os deixamos a sua prpria investigao.
Tabelas em HTML. Atributos da tabela e concluso.

Alm dos atributos especficos de cada 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 parecer principio 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 cor de fundo tabela. Define o nmero de pixels da borda principal.
bordercolor Define a cor da borda. cellpadding Define, em pixels, o espao entre as bordas da clula e o contedo da mesma. cellspacing Define o espao entre as bordas (em pixels). height Define a altura da tabela em pixels ou porcentagem
porcentagem. width Define a largura da tabela em pixels ou porcentagem. Os atributos que definem as dimenses, height e width, funcionam de uma maneira anloga ao das clulas, tal como vimos no captulo anterior. Contrariamente, o atributo align no nos permite justificar o texto de cada una das clulas que compem a tabela, mas sim que permite, justificar a prpria tabela em relao ao seu entorno. Vamos colocar trs exemplos de alinhamento de tabelas, centralizadas, alinhadas direita e esquerda.
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 centralizada
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 cellspacing ajudaro a dar a nossa tabela um aspecto mais esttico. princpio pode nos parecer um pouco confuso seu uso mas com um pouco de prtica j ser suficiente para saber utiliz-los. Na seguinte imagem podemos ver graficamente o significado destes atributos:
Voc mesmo pode comprovar que os atributos definidos para uma clula tm prioridade em relao aos definidos para uma tabela. Podemos definir, por exemplo, uma tabela com a cor de fundo vermelha e uma das clulas com a cor de fundo verde. E assim, toda a tabela ser vista de cor vermelha manos a clula verde. Da mesma forma, podemos definir uma cor azul para as bordas da tabela e fazer com que uma clula particular seja mostrada com uma borda vermelha. (Apesar de que isto no funcionar em todos os navegadores devido ao fato de alguns no reconhecerem o atributo bordercolor.) Tabela de cor O atributo bgcolor da vermelha de tabela est em vermelho. fundo Clula normal Esta clula est em verde. Tem o atributo bgcolor na cor verde
Tabelas aninhadas O uso de tabelas aninhadas tambm muito til. Da mesma forma que podamos incluir listas dentro de outras listas, as tabelas podem ser includas dentro de outras. Assim, podemos incluir uma tabela dentro da clula de outra. A forma de funcionamento continua sendo o mesmo apesar de que a situao pode se complicar se o nmero de tabelas includas 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 conseguiremos entend-lo melhor.
Clula da tabela principal
Tabela aninhada, clula 1 Tabela aninhada, clula 2 Tabela aninhada, clula 3 Tabela aninhada, clula 4
Este seria o cdigo: <table cellspacing="10" cellpadding="10" border="3"> <tr> <td align="center"> Clula da tabela principal </td> <td align="center"> <table cellspacing="2" cellpadding="2" border="1"> <tr> <td>Tabela aninhada, clula 1</td> <td>Tabela aninhada, clula 2</td> </tr> <tr> <td>Tabela unida, clula 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 realizao de uma tabela um pouco mais complexa. Por exemplo, a seguinte: Animais em perigo de extino Nome Baleia Urso Pardo Lince Tigre Cabeas 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 Amrica de Sul. Colmbia Pases como: Equador Per Sul da Amrica do Sul. Pases como: Argentina Chile Uruguai Paraguai
Floresta tropical, clima de savana, clima martimo com invernos secos.
Climas martimos com veres secos, com invernos secos, climas frios, clima de estepe, clima desrtico.
Formulrios HTML
At agora vimos a forma na qual o HTML providencia e mostra a informao, essencialmente mediante o texto, imagens e links. Falta ver de que forma podemos trocar informaes com nosso visitante. Desde ento, este novo aspecto primordial para a grande quantidade de aes que se podem realizar mediante o Web: Comprara um artigo, preencher uma enquete, enviar um comentrio ao autor... Vimos anteriormente que poderamos, mediante os links, entrar em contato diretamente com um correio eletrnico. Entretanto, esta opo pode ser em alguns casos pouco verstil se o que desejamos que o navegante nos envie uma informao bem precisa. atravs dele, o HTML que propem outra soluo muito mais ampla: Os formulrios. Os formulrios so estas famosas caixas de texto e botes que podemos encontrar em muitas pginas web. So muito utilizados para realizar buscar ou tambm para introduzir dados pessoais, por exemplo, em sites de comrcios eletrnico. Os dados que o usurio introduz nestes campos so enviados ao correio eletrnico do administrador do formulrio ou tambm, em um programa que se encarrega de process-lo automaticamente. Usando HTML podemos unicamente enviar o formulrio a um correio eletrnico. Se quisermos processar o formulrio mediante um programa, a coisa pode ser um pouco mais complexa, j que teremos que empregar outras linguagens mais sofisticadas. Neste caso, a soluo mais simples utilizar os programas pr-desenhados que nos propem um grande nmero de servidores de hospedagem e que nos permitem armazenar e processar 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 oferecem este ou outros tipos de servios gratuitos para webs. claro que tambm existe outra alternativa que a de aprender linguagens como ASP ou PHP que nos permitir, entre outras coisas, o tratamento de formulrios. Os formulrios so definidos por meio das etiquetas <form> e </form>. Entre estas duas etiquetas colocaremos todos os campos e botes que compem o formulrio. Dentro desta etiqueta <form> devemos especificar alguns atributos.: Action Define o tipo de ao a realizar com o formulrio. Como j dissemos, existem duas possibilidades: O formulrio enviado a um endereo de correio eletrnico O formulrio enviado a um programa ou script que processa seu contedo. No primeiro caso, o contedo do formulrio enviado ao endereo de correio eletrnico especificada por meio de uma sintaxe deste tipo: <form action="mailto:endereo@correio.com"> Se o que queremos que o formulrio seja processado por um programa, temos de especificar o endereo do arquivo que contem o tal programa. A etiqueta ficaria neste caso da seguinte forma:
<form action="endereo do arquivo"...> A forma na qual se expressa a localizao do arquivo que contm o programa a mesma que a vista para os links. Method Este atributo se encarrega de especificar a forma na qual o formulrio enviado. Os dois valores possveis que este atributo pode tomar so post e get. A efeitos prticos e salvo se lhe disserem o contrrio, daremos sempre o valor post. Enctype Utiliza-se para indicar a forma na qual viajar a informao que for mandada pelo formulrio. No caso mais corrente, enviar o formulrio por correio eletrnico, o valor deste atributo deve ser "text/plain". Assim, conseguimos que o contedo do formulrio seja enviado como texto plano dentro do e-mail. Se quisermos que o formulrio se processe automaticamente por um programa, geralmente no utilizaremos este atributo, de forma que tome seu valor padro, ou seja, no incluiremos enctype dentro da etiqueta <form>. Exemplo de etiqueta <form> completa Assim, para o caso mais habitual - o envio do formulrio por correio - a etiqueta de criao do formulrio ter o seguiente aspecto: <form action="mailto:endereo@correio.com (ou o nome do arquivo de processo)" method="post" enctype="text/plain"> Entre esta etiqueta e seu fechamento, colocaremos o resto de etiquetas que daro forma ao nosso formulrio, as quais sero vistas nos prximos captulos.
Elementos de formulrios. Campos de texto.

O HTML nos propem uma grande diversidade de alternativas na hora de criar nossos formulrios. Estas vo desde a clssica caixa de texto at a lista de opes passando pelas caixas de validao. Veremos em que consiste cada una destas modalidades e como podemos implement-las em nosso formulrio. Texto curto As caixas de texto so colocadas por meio da etiqueta <input>. Dentro desta etiqueta temos de especificar o valor de dois atributos: type e name. A etiqueta da seguinte forma: <input type="text" name="nome"> Deste modo expressamos nosso desejo de criar uma caixa de texto cujo contedo ser chamado nome (por exemplo). O aspecto deste tipo de caixas conhecido, como pode ser visto aqui:
O nome do elemento do formulrio de grande importncia para poder identific-lo em nosso
O nome do elemento do formulrio de grande importncia para poder identific lo em nosso programa de processamento ou no e-mail recebido. Por outro lado, importante indicar o atributo type, j que, como veremos, existem outras modalidades de formulrio que usam esta mesma etiqueta. O emprego destas caixas est fundamentalmente destinado tomada de dados breves: palavras ou conjuntos de palavras de longitude relativamente curta. Veremos mais adiante que existe outra forma de tomar textos mais longos a partir de outra etiqueta. Alm destes dois atributos, essenciais para o correto funcionamento de nossa etiqueta, existem outra srie de atributos que podem ser de utilidade, mas que no so imprescindveis. size Define o tamanho da caixa em nmero de caracteres. Se ao escrever o usurio chega ao final da caixa, o texto ir desfilando medida que se escreve fazendo desaparecer a parte de texto que fica esquerda. maxlength Indica o tamanho mximo do texto que pode ser tomado pelo formulrio. importante no confund-lo com o atributo size. Enquanto o primeiro define o tamanho aparente da caixa de texto, maxlength indica o tamanho mximo real do texto que pode ser escrito. Podemos ter uma caixa de texto com um tamanho aparente (size) que menor do que o tamanho mximo (maxlength). O que ocorrer neste caso que, ao escrever, o texto ir desfilando dentro da caixa at que cheguemos ao seu tamanho mximo definido por maxlength, momento no qual ser impossvel continuar escrevendo. value Em alguns casos pode ser interessante atribuir um valor definido ao campo em questo. Isto pode ajudar ao usurio a preencher mais rapidamente o formulrio ou a dar alguma idia sobre a natureza de dados que se requerem. Este valor inicial do campo pode ser expresso mediante o atributo value. Vejamos seu efeito com um exemplo simples: <input type="text" name="nome" value="Perico Palotes"> Gera um campo 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 esconder o texto escrito por meio de asteriscos de forma a fornecer uma certa confiabilidade. Este tipos de campos so anlogos aos de texto com somente uma diferena: deslocando o atributo type="text" por type="password": <input type="password" name="nome"> Neste caso, pode ser comprovado que ao escrever dentro do campo no lugar de texto sero
vistos asteriscos. Estes campos so ideais para a introduo de dados confidenciais, principalmente cdigos de acesso. Isto pode ser visto em funcionamento a seguir:
Texto longo Se desejarmos colocar disposio do usurio um campo de texto onde possa escrever comodamente sobre um espao composto de vrias linhas, temos de convocar uma nova etiqueta: <textarea> e seu fechamento correspondente. Estes tipos de campos so prticos quando o contedo a enviar no um nome, telefone ou qualquer outro dado breve, e sim, um comentrio, opinio, etc. Dentro da etiqueta textarea deveremos indicar, como para o caso visto anteriormente, o atributo name para associar o contedo a um nome que ser semelhante a uma varivel nos programas de processo. Alm disso, podemos definir as dimenses do campo a partir dos seguintes atributos: rows Define o nmero de linhas do campo de texto. cols Define o nmero de colunas do campo de texto. A etiqueta fica portanto, desta forma: <textarea name="comentrio" rows="10" cols="40"></textarea> O resultado o seguinte:
Mesmo assim, possvel definir o contedo do campo. Para isso, no usaremos o atributo value e sim, que escreveremos dentro da etiqueta o contedo que lhe desejamos atribuir. Vejamos: <textarea name="comentrio" rows="10" cols="40">Escreva seu comentrio....</textarea> Ter como resultado: Escreva seu comentrio....
Outros elementos de formulrios

Efetivamente, os textos so uma maneira muito prtica de fazer chegar a informao do navegante. Porm, em muitos casos, os texto so dificilmente adaptveis a programas que possam process-los devidamente ou tambm pode ser que seu contedo no se ajuste ao tipo de informao que requeremos. por isso que, em determinados casos, pode ser mais efetivo propor uma escolha ao navegante a partir da exposio de uma srie de opes. Este o caso de, por exemplo, oferecer uma lista de pases, o tipo de carto de crdito para um pagamento, etc. Estes tipos de opes podem ser expressadas de diferentes formas. Vejamos a seguir quais so: Listas de opes As listas de opes so esse tipo de menus desdobrveis que nos permite escolher uma (ou vrias) das mltiplas opes que nos propem. Para constru-las utilizaremos uma etiqueta com seu respectivo fechamento: <select> Como para os casos j vistos, dentro desta etiqueta definiremos seu nome por meio do atributo name. Cada opo ser includa em uma linha precedida da etiqueta <option>. Podemos ver, a partir destas diretrizes, a forma mais tpica e simples desta etiqueta: <select name="estao"> <option>Primavera</option> <option>Vero</option> <option>Outono</option> <option>Inverno</option> </select> O resultado :
Primavera Esta estrutura pode ser vista modificada principalmente a partir de outros dois atributos: size Indica o nmero de valores mostrados da lista. O resto pode ser visto por meio da barra lateral de deslocamento. multiple Permite a seleo de mais vrios elementos da lista. A escolha de mais de um elemento se faz como com o explorador de Windows, a partir das teclas ctrl ou shift. Este atributo se expressa sem valor algum, ou seja, no se utiliza com o igual: simplesmente se coloca para conseguir o efeito, ou no se coloca se quisermos uma lista desdobrvel comum.
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: <select name="estao"> por:
<select name="estao" size="3" multiple> A lista ficar desta forma:
Primavera Vero Outono Inverno A etiqueta <option> ainda pode ser precisada por meio de outros atributos 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 cdigo anterior: <option>Outono</option> por: <option selected>Outono</option> O resultado ser:
Outono value Define o valor da opo que ser enviada ao programa ou ao correio eletrnico se o usurio escolhe essa opo. Este atributo pode ser muito til se o formulrio for enviado a um programa visto que a cada opo se pode associar um nmero ou letra, o qual torna-se mais facilmente manipulvel que uma palavra ou texto. Poderamos assim escrever linhas do tipo: <option value="1">Primavera</option> Deste modo, se o usurio escolhe primavera, o que chegar ao programa (ou ao correio) uma varivel chamada estao que ter com valor 1. No correio eletrnico receberamos: estao=1 Botes de radio Existe outra alternativa para expor uma escolha, neste caso, obrigamos ao internauta a escolher unicamente uma das opes que lhe propem. A etiqueta empregada neste caso <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="estao" value="1">Primavera type="radio" name="estao" value="2">Vero type="radio" name="estao" value="3">Outono type="radio" name="estao" 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 cada 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 escolhe supostamente Outono, receberemos em nosso correio uma linha tal como esta: estao=3 Cabe assinalar que possvel pr-selecionar por padro uma das opes. Isto se pode conseguir por meio do atributo checked: <input type="radio" name="estao" 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 com um simples clique sobre a caixa em questo. A sintaxe utilizada muita parecida com as vistas anteriormente: <input type="checkbox" name="paella">Adoro uma feijoada O efeito: Adoro uma feijoada A nica diferena fundamental o valor adotado pelo atributo type. Da mesma forma que para os botes de radio, podemos ativar a caixa por meio do atributo checked. O tipo de informao que chegar 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 informao a tomar do usurio como tambm, a outra srie de funes. Concretamente, permite-nos seu envio mediante seu boto. Tambm pode ser prtico poder propor um boto de Apagar Campos ou tambm, acompanh-lo de dados ocultos que possam ajudar-nos em seu processamento. Neste captulo, para terminar a saga de formulrios, tornaremos conhecidos os meios de instalar
p , p todas estas funes. boto Submit (ou de envio)
Para finalizar o processo de preenchimento do formulrio e faz-lo chegar a seu gestor, o navegante tem de valid-lo por meio de um boto previsto para tal efeito. A construo de tal boto no implica nenhuma dificuldade uma vez familiarizados com as etiquetas input j vistas: <input type="submit" value="Enviar"> Com este cdigo geramos um boto como este: Enviar Como pode ser visto, somente temos de especificar 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 completo no caso de que o usurio deseje refaz-lo desde o princpio. Sua estrutura sinttica igual a anterior: <input type="reset" value="Apagar Campos"> A diferena do boto de envio, indispensvel em qualquer formulrio, o boto de Apagar Campos meramente optativo e no utilizado freqentemente. H de ter cuidado de no coloca-lo muito perto do boto de envio e de distinguir claramente um do outro. Dados ocultos Em alguns casos, aparte dos prprios dados enviados pelo usurio, pode ser prtico 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 detectados solicitando o cdigo fonte, no so freqentemente utilizados por pginas construdas em HTML, so mais usados por pginas que empregam tecnologias de servidor. No se assustem, pois veremos mais adiante o que isto quer dizer. Queremos apenas dar constncia de sua existncia e de seu modo de criao. Como por exemplo: <input type=hidden name="site" value="www.criarweb.com"> Esta etiqueta, includa dentro de nosso formulrio, enviar um dado adicional ao correio ou ao programa encarregado da gesto do formulrio. Poderamos a partir deste dado, tornar conhecido ao programa a origem do formulrio ou algum tipo de ao a realizar (um re-endereamento, por exemplo). Botes normais Dentro dos formulrios tambm podemos colocar botes normais, clicveis como qualquer outro boto. Da mesma forma que ocorre com os campos hidden, estes botes por si s no tm muita utilidade, mas poderemos necessita-los para realizar aes no futuro. Sua sintaxe a seguinte: <input type=button value="Texto escrito no boto"> Ficaria desta maneira: Texto escrito no boto O uso mais frequente de um boto na programao no cliente. Utilizando linguagens como Javascript podemos definir aes a tomar quando um visitante clique 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 criao de um formulrio que consulta o grau de satisfao dos usurios de uma linha de nibus fictcia. O formulrio est construdo para que envie os dados por correio eletrnico a uma caixa de entrada determinada. Vemos o formulrio nesta pgina. Vocs tratem de constru-lo para ver se realmente entenderam bem os temas sobre formulrios. Nome E-mail @ Cidade Sexo Homem Mulher Frequncia das viagens Vrias vezes por dia Comentrios sobre sua satisfao pessoal
Desejo receber notificao das novidades nas linhas de nibus. Enviar formulrio Apagar tudo A seguir tambm mostraremos o cdigo 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> b
<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 acabar, vamos ver o que receberiam por correio eletrnico na empresa de nibus quando um usurio qualquer preenchesse este formulrio e clicasse sobre o boto de envio. nome=Frederico Silvestre e-mail=fede@terramix.com cidade=Rio de Janeiro sexo=Masculino utilizao=2 comentrios=Acho que no uma boa linha. Colocar mais nibus. receber_info=on
Mapas de imagens com HTML

Nos captulos anteriores nos aprofundamos no elemento bsico de navegao do web: O link hipertexto. Vimos que estes links so palavras, textos ou imagens que, ao clicar sobre eles, nos enviam a outras pginas ou zonas. Os mapas de imagem so uma nova exposio de navegao que incorpora uma srie de links dentro de uma mesma imagem. Estes links so definidos por figuras geomtricas e funcionam exatamente da mesma forma que os outros links. Pode-se ver o funcionamento de um neste link. princpio, estes mapas no eram diretamente reconhecidos pelos navegadores e recorriam tecnologias de lado do servidor para serem visualizados. Hoje em dia podem ser implementados por meio de cdigo HTML tal como veremos neste captulo. Podemos utilizar estes mapas, por exemplo, em portais onde tornamos conhecida cada uma das sesses do site por meio de uma imagem. Tambm pode ser muito prtico, em mapas geogrficos onde cada cidade, estado ou ponto qualquer representa um link a uma pgina. Em qualquer caso, o uso destes mapas tem de ser sistematicamente acompanhado de um texto explicativo que d a entender ao usurio sobre os distintos pontos da imagem. Frases como "D um clique sobre tal cone para acesar a tal informao". So muito indicativas na hora de fazer intuitiva a navegao pelos mapas de imagens. Por outro lado, no demais introduzir essa mesma explicao no atributo alt da imagem. Sendo assim, um mapa de imagem est composto por duas partes: A imagem propriamente dita que estar situada como de costume dentro da etiqueta <body> de nosso documento HTML. Um cdigo, situado no interior da etiqueta <map>, que delimitar por meio de linhas geomtricas imaginrias cada uma das reas dos links apresentados na imagem. As linhas geomtricas que delimitan os links, ou seja, as reas dos links, devem ser definidas por meio de coordenadas. Cada imagem definida por umas dimenses de largura (X) e altura (Y) e cada ponto da imagem pode ser definido portanto, dizendo a que altura (x) e largura (y) nos encontramos. Deste modo, a esquina superior esquerda corresponde posio 0,0 e a esquina inferior direita corresponde s coordenadas X,Y. Se desejamos saber quais coordenadas correspondem a um ponto concreto de nossa imagem, o melhor utilizar um programa de desenho
grfico como Photoshop ou Paint Shop Pro. A melhor forma de explicar o funcionamento deste tipo de mapa a partir de um exemplo prtico. Suponhamos que temos uma imagem com um mapa como esta:
C lique nos crculos para a ce ssa r s se e s!
Dentro dela queremos introduzir um link a cada um dos elementos que a compem. Para isso, definiremos nossos links como zonas circulares de tamanho pequeno que sero distribudas ao comprimento e largura da imagem. Vejamos a seguir o cdigo que utilizaremos:
<table border=0 width=450><tr><td align="center"> <map name="mapa1"> <area alt="C lique para ver a pgina de meus amigos" shape="C IRC LE" coords="44,36,29" href="#"> <area alt="C lique para ver minha noiva" shape="C IRC LE" coords="140,35,31" href="#"> <area alt="C lique para conhecer minha famlia" shape="circle" coords="239,37,30" href="#"> <area alt="C lique 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 parcial de utilizao dos mapas, faltaria colocar os href com valores reais e no com a #. Cada um dos links das reas -atributo href da etiqueta <area>deveriam levar a uma pgina web. O exemplo ficaria completo se crissemos todas as pginas onde linkar as reas e colocssemos os href dirigidos para tais pginas. Como no fizemos as pginas "destino" colocamos links que no levam a lugar nenhum, que, como se pode ver, indica-se com o carter "#". possvel observar, tal como explicamos antes, que nosso mapa consta de duas partes principais: a imagem e a etiqueta <map> que define as reas de cada link. Cada rea se indica com uma etiqueta <area>, que tem os seguinte atributos: alt Para indicar um texto que ser mostrado quando situarmos o mouse na rea. shape Indica o tipo de rea. coords As coordenadas que definem a rea. Ser um grupo de valores numricos distintos dependendo do tipo de rea (shape) que estivermos definindo. href Para indicar o destino do link correspondente rea. Neste caso utilizamos umas reas circulares (shape="CIRCLE"), que se definem indicando o centro do crculo -uma coordenada (X,Y) e o radio, que um nmero inteiro que se corresponde com o nmero de pixels desde o centro at a borda do crculo. Tipos de reas: shape distintas.
Existem trs tipos de reas distintas, suficientes para fazer quase qualquer tipo de figura. No desenho que acompanha estas linhas pode ser visto uma representao das reas, que detalhamos a seguir. shape="RECT" Cria uma rea retangular. Para defini-la utilizam-se as coordenadas dos pontos da esquina superior esquerda e da esquina inferior direita. Tal como esto nomeadas tais coordenadas em nosso desenho, a rea teria a seguinte etiqueta: <area shape="RECT" coords="X1,Y1,X2,Y2" href="#"> shape="CIRCLE" Cria uma rea circular, que se indica com a coordenada do centro do crculo e o radio. De acordo com nosso desenho, a etiqueta de uma rea circular teria esta forma: <area shape="CIRCLE" coords="X1,Y1,R" href="#"> shape="POLY" Este tipo de rea, poligonal, a mais complexa de todas. Um polgono fica definido indicando todos seus pontos, mas ateno, pois temos que indic-los em ordem, seguindo o caminho marcado pelo permetro do polgono. Segundo nosso desenho e os nomes que demos aos pontos do polgono, a etiqueta <area> ficaria desta forma: <area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">
Frames em HTML
Uma das mais modernas caractersticas de HTML so os frames, que foram acrescentados tanto em Netscape Navigator como 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 cada espao se coloca uma pgina diferente que se codifica em uma arquivo HTML diferente. princpio se criaram como etiquetas proprietrias do navegador Netscape e rapidamente a potncia do recurso fez com que o uso de frames se estendesse por toda a web. Pouco tempo demoraria para Internet Explorer inclu-los, pois no podia deixar escapar uma novidade to popular de seu competidor. Finalmente, como resposta popularidade entre os desenvolvedores dos frames, o padro HTML 4.0 incluiu estas etiquetas dentro das permitidas. Os frames, como dizamos, nos permitem dividir a janela do navegador em diferentes reas. Cada uma destas reas so independentes e devem ser codificadas com arquivos HTML tambm independentes. Como resultado, cada frame ou janela contem as propriedades especficas que indicamos no cdigo HTML apresentado nesse espao. Sendo assim, e dado que cada janela independente, tero suas prprias barras de deslocamento, horizontais e verticais, separadamente. Existem muitas pginas na web que contm frames e certamente todos j tiveram a ocasio de
conhecer algumas. Costuma se utilizar para colocar em uma parte da janela uma barra de navegao, que geralmente encontra-se fixa e permite o acesso a qualquer zona da pgina web. Uma das principais vantagens da programao com frames vem derivada da independncia dos distintos frames, pois podemos navegar pelos contedos de nosso site web com a barra de navegao sempre visvel, e sem que se tenha que recarregar em cada uma das pginas que vamos visitando. Um exemplo das reas que se podem construir em uma construo de frames pode ser visto nas imagens a seguir.
Frames Explicao bsica

As pginas web que esto feitas com frames se compem de uma declarao das janelas e tantas pginas em formato HTML corrente como distintas divises tivermos definido. A declarao ou definio de frames a nica pgina que realmente devemos aprender, visto que as pginas que sero visualizadas em cada uma das janelas so arquivos HTML dos que viemos aprendendo anteriormente neste manual. Tal definio est composta por etiquetas <FRAMESET> e <FRAME>, com as quais indicamos a disposio de todos os quadros. A etiqueta <FRAMESET> indica as divises da janela do navegador e a etiqueta <FRAME> indica cada um dos quadros onde colocaremos uma pgina independente. As parties 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 colunas- como o nmero de parties que pretendemos fazer, temos de utilizar o atributo COLS ou ROWS. O primeiro serve para indicar uma partio em colunas e o segundo para uma partio 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 escolher um dos dois- colocamos entre aspas o nmero de divises que desejamos realizar, indicando de antemo o tamanho que vai atribuir a cada uma. Um valor tpico destes atributos seria o seguinte: cols="20%,80%" Indica que devem ser colocadas duas colunas, a da esquerda teria uns 20% do espao total da janela e a da direita uns 80%. rows="15%,60%,25%" Assim, indicamos que desejamos trs filas, a de cima com um 15% do espao total, a do meio com um espao correspondente ao 60% do total e a de abaixo com um 25%. Ao total somam o 100% do espao da janela.
100% do espao da janela. Alm da porcentagem para indicar o espao de cada um dos campos, tambm podemos indic-lo em pixels. Desta maneira: cols="200,600" Para indicar que a coluna 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 da seguinte maneira. cols="200,*" Assim, indicamos que a primeira coluna 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 coluna. Na prtica podemos misturar todos estes mtodos para definir as janelas da maneira de desejarmos, com porcentagem, com pixels ou com o asterstico (*). No importa como se definem, a nica recomendao que um dos valores que indiquemos seja um asterisco, para que a rea correspondente a tal asterisco seja mais ou menos grande dependendo do espao que tenha a janela de nosso navegador. Outros mtodos de definir filas e colunas, atendendo a este conselho, 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 terceira com um 12% do espao total. cols="10%,50%,120,*" Estamos indicando quatro colunas. A primeira de 10% do espao da janela, a segunda com 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 colunas e o espao reservado a cada uma com a etiqueta <FRAMESET>, devemos especificar com a etiqueta <FRAME> a procedncia de cada um dos frames que dividimos a janela. Para isso, dispomos do atributo SRC, que tem de ser definido para cada uma das filas ou colunas. Desta maneira. <FRAME src="janela1.html"> Assim fica indicado 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 como se criaria a definio de frames da imagem que podemos ver a seguir.
<html> <head> <title>Definio de Frames</title> </head> <frameset rows="15%,*,75"> <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 consideraes a fazer para terminar de compreender este exemplo: O ttulo da definio de frames o que herda toda a pgina web, por isso, no boa idia titular como "definio de frames" por exemplo, j que ento toda nossa pgina se titularia assim e certamente no seria muito descritivo. Se estivssemos fazendo uma pgina para o aougue Gonalves seria melhor titular a definio de frames algo como "Aougue Gonalves, as melhores carnes no Rio de Janeiro". A pgina que define os frames no tem body. O HTML pode totalizar um erro se o incluirmos. As pginas "pagina1.html", "pagina2.html" e "pagina3.html" devem ser escritas em arquivos independentes com o nome indicado. Neste exemplo, Tais pginas deveriam se encontrar no mesmo diretrio que a declarao de frames. Se especificarmos uma rota para acessar ao arquivo podemos coloc-lo no diretrio que desejarmos. As cores de cada um dos frames colocamos com o atributo bgcolor colocado na etiqueta <BODY> de cada uma das pginas que se mostram nas janelas.
Frames Uma pgina em cada moldura

As pginas que mostraremos em cada moldura so documentos HTML iguais aos que viemos criando anteriormente. Podemos colocar qualquer elemento HTML dos estudados neste manual, como etiquetas de pargrafo, imagens, cores de fundo, etc. Cada documento, como j indicamos, se escreve separado em seu prprio arquivo HTML. Para o exemplo do captulo anterior podemos definir os arquivos HTML da seguinte maneira. pagina1.html a pgina que contm 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 Aougue Gonalves</title> </head> <body bgcolor="#DECC09"> <h1 align=center>Aougue Gonalves</h1> /b d
</body> </html> pagina2.html a pgina que se apresentar na rea principal da definio de frames, ou seja, a pgina que tem mais espao para ser visualizada e onde colocaremos os contedos da web. Neste caso, mostra uma mensagem de bem-vindo web, que far as vezes de portal. <html> <head> <title>Portal do Aougue Gonalves</title> </head> <body bgcolor="#CF391C" text="#ffffff"> <h1 align="center">Bem-vindo a nossa web</h1> <br> <br> O aougue Gonalves, com mais de 100 anos de experincia, a melhor fonte de carnes de boi e de porco da regio. <br> <br> Tanto no inverno como no vero voc pode encontrar nossas ofertas de temporada de primeira qualidade. </body> </html> pagina3.html Nesta pgina se mostrar a barra de navegao pelos contedos do site. Contm links que deveriam atualizar o contedo da rea principal da declarao de frames, para mostrar os distintos contedos do sitio, por exemplo, o portal, os produtos, a pgina de contato, etc. <html> <head> <title>Barra de navegao de aougue Gonalves</title> </head> <body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc"> <div align="center"> <b> <a href="pagina2.html">Portal</a> | <a href="produtos.html">Produtos</a> | <a href="contato.html">Contato</a> </b> </div> </body> </html> Podemos ver como fica a pgina de frames com estes contedos, que simulam a pgina de um aougue.
Frames Orientar os links

A nica particularidade destacvel 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 espao correspondente a terceira janela, atualizaro os contedos do terceiro frame, que onde esto
p situados os links.
, q
Este efeito que comentamos pode-se observar no exemplo da pgina do aougue, tal como ficaria ao incluir os cdigos das distintas pginas. O lgico que ao clicar sobre um link da barra de navegao atualizamos o frame principal, que onde havamos planejado colocar os contedos, no lugar do frame onde colocamos a barra de navegao, que deveria se manter fixa. Para conseguir este efeito devemos fazer duas coisas: 1. Dar um nome ao frame que desejamos atualizar Tal nome se indica na etiqueta <FRAME> da definio 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 clicar o link. Depois de dar um nome ao frame principal, nossa declarao de frames ficaria da seguinte maneira. <frameset rows="15%,*,75"> <frame src="pagina1.html"> <frame src="pagina2.html" name="principal"> <frame src="pagina3.html"> </frameset> Ademais, deveramos colocar o atributo target aos links, tal como se segue. <a href="pagina2.html" target="principal">Portal</a> | <a href="produtos.html" target="principal">Produtos</a> | <a href="contato.html" target="principal">Contato</a> Uma vez realizados estas duas mudanas podemos ver como os links da barra de navegao sim que atualizam a pgina que devem. Valores para o atributo target Como vimos, com o atributo target da etiqueta <A> podemos indicar o nome do frame que desejamos que atualize esse link. Entretanto, este no o nico valor que podemos aplicar ao atributo. Temos alguns valores adicionais que podemos atribuir a qualquer link em geral. _blank Para fazer com que esse link se abra em uma janela a parte. Nossos exemplos neste manual costumam 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 carrega a tela completa, ou seja, eliminando todos os frames que pudesse haver. Este atributo muito importante porque se colocamos em nossa pgina com 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 costuma ser pouco agradvel, porque parece que esto evitando que nos escapemos. A sintaxe de um desses valores de atributos colocados em um link seria a seguinte: <A href="http://www.criarweb.com" target="_top">Acessar a criarweb.com</A>
Informe de Miguel Angel Alvarez - Traduo de JML
Informe de Miguel Angel Alvarez e-mail: juliana@criarweb.com
Traduo de JML
Frames Aninhar frames

Para criar estruturas de janelas nas quais se misturam as filas e as colunas devemos aninhar etiquetas <FRAMESET>. Comeando pela partio de frames mais geral, devemos colocar dentro as parties 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 representao sobre a maneira de defini-los. Em primeiro definimos uma estrutura de frames em duas colunas e dentro da primeira coluna colocamos outra partio de frames em duas filas. O cdigo necessrio o seguinte. <frameset cols="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 complicar um pouco mais se incluirmos mais parties. Vamos ver algo um pouco mais complicado para praticar mais com 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 compe de duas filas Posteriormente
Na imagem se observa que o primeiro frameset a definir se compe de duas filas. Posteriormente, dentro da segunda fila do primeiro frameset, temos outra partio em duas colunas, dentro das que colocamos um terceiro nvel de frameset com uma defino em filas nos dois casos. O cdigo pode ser visto a seguir. <frameset rows="60,*"> <frame src="pagina1.html"> <frameset cols="200,*"> <frameset rows="*,150"> <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 bsica da criao de frames. Nos prximos captulos poderemos aprender a configurar as janelas para variar sua aparncia e, entre outras coisas, eliminar as barras que separam cada um dos distintos frames.
Frames Atributos avanados

A parte da criao das janelas propriamente dita, existem muitos atributos com os que configurar sua aparncia. Para isso, tanto a etiqueta <frameset> como <frame> admitem diversos atributos que permitem especificar a forma de elementos como as bordas dos frames, a margem, a existncia ou no de barras de deslocamento, etc. Atributos para a etiqueta <frameset> J conhecemos o atributo cols e rows, que servem para indicar se a distribuo em janelas se far horizontalmente ou verticalmente. Somente se pode utilizar um deles e se iguala s dimenses de cada uma das divises, separadas por vrgulas. border="nmero de pixels" Permite especificar 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 prtica elimina a borda, mas permanece uma linha de separao dos frames. framespacing="nmero de pixels" Para determinar a largura da linha de separao 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 captulos anteriores os atributos src, que servem para indicar o arquivo que contm a janela e name, para dar um nome janela e logo direcionar 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 indica. Esta margem se aplica pgina que pretendemos ver nessa janela, de modo que se colocamos 0, os contedos da pgina nessa janela estaro completamente grudados na borda da margem e se indicamos um valor de 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 vertical. scrolling="yes|no|auto" Serve para indicar se queremos que haja barras de deslocamento nas diferentes janelas. Se indicamos "yes" sempre sairo as barras, se indicamos "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 coloca ou no se coloca. No caso de que esteja presente indica que o frame no se pode redimensionar. Como podemos ver, ao colocar 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 controlar a apario 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 comprovar funciona melhor no Netscape do que no Internet Explorer. De qualquer forma, temos um pouco 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 especificar a cor da borda da janela.

Vantagens e incovenientes do uso de frames

O desenho com frames um assunto bastante controvertido, 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 caso, penso que prefervel no utiliz-los, apesar de que isso depende do tipo de web site que esteja construindo pois em alguns casos sim que seria muito adequado seu uso
site que esteja construindo, pois em alguns casos sim que seria muito adequado seu uso. Colocarei algumas vantagens e alguns inconvenientes deo uso de janelas (frames). Isto ao meu ponto de vista, outros podem ter outras opinies. Vantagens de usar frames A navegao da pgina ser mais rpida. Apesar de que o primeiro caerregamento da pgina seria igual, em sucessivas impresses pginas j teremos algumas janelas salvas, que no teriam que voltar a descarregar. Criar pginas do site seria mais rpido. Como no temos que incluir partes de cdigo como a barra de navegao, ttulo, etc. criar novas pginas seria um processo muito mais rpido. Partes da pgina (como a barra de navegao) se mantm fixas e isso pode ser bom, para que o usurio no as perca nunca de vista. Estas mesmas partes visveis constantemente, se contm links, podem servir muito bem para melhorar a navegao pelo site. Mantm uma navegabilidade do site onde se navega, pois os elementos fixos conservam a imagem sempre visvel. Inconvenientes de usar frames Tiram espao da tela. O espao 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 declarao de frames. Se no o fazem assim, somente se veria una pgina interior sem os requadros. Estes requadros poderian ser insuficientes para uma boa navegao pelos contedos e poderiam no conservar uma boa imagem corporativa. A promoo da pgina seria, princpio, mais limitada. Isto devido a que somente se deveria promocioanr o portal, pois se se promocionam pginas interiores, poderia acontecer o caso em que os visitantes entrassem por elas no lugar do portal, criando o problema descrito no ponto anterior. Muita gente no gosta porque no se sentem livers na navegao, pois entendem que estas partes fixas esto limitando sua mobilidade pela web. Este efeito se torna mais patente se a pgina com frames tem links a outras pginas web fora do site e, ao clicar um link, se mostra a pgina nova com 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 acessivel deveramos consider-lo importante. Os bookmarks ou favoritos no funcionam corretamente em muitos casos. Se quisermos incluir um favorito a uma pgina de um frame que no seja o portal podemos encontrar problemas. Pode acontecer que o boto detrs do navegador no se comporte como desejamos. Se voc quer atualizar mais de um frame com o clique de um link dever utilizar Javascript. Ademais os scripts podem se complicar bastante quando tm de comunicar vrios frames entre si. Concluso O trabalho com frames pode ser mais ou menos indicado dependendo das caractersticas da pgina a desenvolver, sua tarefa saber se no seu caso deve utiliza-los ou no.
As etiquetas de HTML 4.0

Introduo. Quando Internet comeava sua incontrolvel escalada, a verso padro HTML que circulava era a 2.0, o qual continua suportando os navegadores mais atuais. Porm, as ferramentas de que se dispunha no oferecia um controle preciso dos documentos. Contudo, como at ento o objetivo da Internet estava fundamentalmente orientado ao mbito acadmico e no ao de design, no se deu muita importncia questo de lanar uma verso melhorada do padro at que Netscape, que at ento era a empresa lder no setor, tomou a iniciativa de incluir novas etiquetas pensadas para melhorar o aspecto visual das pginas web. Por este motivo o IETF (Internet Engineering Task Force) ou o que o mesmo, Grupo de Trabalho em Engenharia de Internet, comeou a elaborar novos padres, os quais deram como fruto o HTML 3.0, que resultou ser grande demais para as infra-estruturas que havia nesse momento, o qual dificultou sua aceitao. Sendo assim, uma srie de companhias (entre as que estavam Netscape, Sun Microsystems ou Microsoft, entre outras), se uniram para criar o que hoje se denomina W3C (ou o que o mesmo, Consorcio para a World Wide Web), que foi fundado em outubro de 1.994 para conduzir World Wide Web ao seu mximo potencial, desenvolvendo protocolos de uso comum, para normalizar o uso da web em todo o mundo. O compromisso do W3C de encaminhar Web ao seu mximo potencial inclui promover um alto grau de acessibilidade para as pessoas com deficincias. O grupo de trabalho permanente Web Accessibility Initiative (WAI, Iniciativa para a Acessibilidade da Rede), em coordenao com organizaes ao redor de todo o mundo, persegue a acessibilidade da Web atravs de cinco reas de trabalho principais: Tecnologia, diretrizes, ferramentas, formao, difuso, e investigao e desenvolvimento. Desta iniciativa nasceu o rascunho de HTML 3.2 e em sua verso definitiva se introduziram mudanas essenciais para as possibilidades que os navegadores comeavam a oferecer, estas incluses 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 explicao. <Q>... </Q> As etiquetas <Q> e </Q> agem de forma muito parecida a <BLOCKQUOTE> porm com a particularidade 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 necessidade 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 acrnimo no texto. Um acrnimo um pequeno texto que ajuda a explicar a estrutura do texto uma frase. <INS>... </INS> e <DEL>... </DEL> Utilize < INS>...</INS> para marcar as partes de um documento que foi agregado pela verso passada do documento. <DEL>... </ DEL> marca de maneira similar um texto de um documento que se foi suprimido pela verso anterior. <COLGROUP>... </COLGROUP> Utiliza-se para ter um melhor controle sobre um o formato das tabelas especificando as caractersticas que compartilham como: largura, altura e alinhamento. Cada tabela deve ter pelo menos um <COLGROUP>; sem especificar nenhuma caracterstica de < COLGROUP >. HTML 4.0 assume que uma tabela contm um s grupo de colunas e que este contm todas as colunas de uma tabela. Por exemplo, isto nos serviria para criar uma tabela com uma clula na que pode se incluir uma descrio e depois seguido de check boxes para selecionar as opes desejadas. Cdigo: <TABLE> <C OLGROUP span="10" width="30"> <C OLGROUP span="1" width="0*"> <THEAD> <TR>...
</ TABLE>
Desta forma, <COLGROUP> proporciona um formato mais agradvel aos check boxes sem a necessidade de especificar, propriedades idnticas para cada fila. A etiqueta de incio < COLGROUP >, requer outra de fechamento. Com o qual obtemos: (em Nestcape 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 controles, se no aproveitssemos elementos que no so do formulrio, como tabelas ou imagens. Agora, se fechamos uma parte de um formulrio dentro da etiqueta FIELDSET se mostrar um retngulo ao redor dos mesmos. Ademais, podemos indicar um ttulo por meio da etiqueta LEGEND, que admite o parmetro align="left / center / right / top / bottom", o que nos permite alinhar o ttulo horizontal e verticalmente. O nico problema que deveremos introduzir o conjunto em uma clula 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>
/form
<LABEL>... </LABEL> At pouco tempo atrs os campos de entrada no estavam associados a eles mesmos. Por exemplo; na hora de clicar sobre um campo de confirmao, no acontecia nada! Porm agora, se o clicarmos o controle mudar de estado. 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 com vrias etiquetas novas para construir formulrios, sendo BUTTON uma delas, alis, bastante. O problema que as verses de 4 de Nestcape foram lanadas antes destas implementaes, por isso estas etiquetas s podem ser visualizadas corretamente com Internet Explorer 4 e superiores. Esta etiqueta proporciona um mtodo nico para a implementao de qualquer tipo de boto de formulrio. Seus principais atributos so: type= " tipo ", que pode tomar os j conhecidos valores submit (por padro), reset e button. name= " nome ", que atribui um nome identificador nico ao boto. value= " texto ", que define o texto que vai aparecer no boto.
A principal vantagem que traz estas etiquetas que agora vamos poder introduzir dentro delas qualquer elemento de HTML, como 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 documentos textuais aos que se podem acessar pela Internet, mas como umas verdadeiras apresentaes multimdia, que combinam textos com imagens, udios, vdeos e elementos de realidade virtual.
Se o primeiro passo que se deu foi adicionar imagens s pginas web (tanto estticas como dinmicas GIF animados), o seguinte passo consistiu em introduzir udios nas mesmas, conseguindo com eles o apelativo de "multimdia". E nos referiremos daqui por diante quando falarmos de udio tanto sintetizado como verdadeiras gravaes de udio, de qualidade muito elevada. Entretanto, apesar dos navegadores terem sido capazes de interpretar os arquivos de udio adequados desde j algumas verses, verdade que a aplicao de udios s pginas web sempre esteve limitada pela largura de banda necessria nas conexes a Internet para poder baixar de forma adequada tais arquivos, devido ao tamanho "excessivo" dos mesmos. Outra das limitaes importantes que encontramos na hora de incluir arquivos de udio em nossas pginas a diferente implementao que fazem deles os navegadores web mais usados. Teoricamente, no s deveremos usar etiquetas HTML distintas para Internet Explorer que para Netscape Navigator, como tambm que s vezes a prpria forma de interpretar o udio pode diferir de um ao outro navegador. Finalmente, h que destacar que na hora de incluir arquivos de udio em nossas pginas devemos ser conscientes que muitos dos formatos usados, sobretudo em gravaes de qualidade, precisam um plugin ou programa especial para sua reproduo no navegador cliente. E se verdade que atualmente h certos 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 incluirmos arquivos deste tipo obrigaremos ao usurio a ter que instal-los, coisa que as pessoas costuma ter resistncia.
Informe de Luciano Moreno
udio em HTML II, caractersticas do udio digital

Vamos estudar alguns dos conceitos bsicos do udio digital, embora sem entrar em demasiadas consideraes tcnicas. Para aqueles que desejarem mais informao, existem uma infinidade de web sites que estudam especificamente o udio digital e o hardware necessrio para sua captura e reproduo. O udio tem uma natureza ondulante, ou seja, se propaga em forma de ondas analgicas desde o objeto que o produz. As caractersticas prprias de qualquer udio (desde o produzido por um automvel at uma bela cano), seus diferentes tons e notas dependem precisamente das propriedades fsicas das ondas que o formam. Para poder viajar desde o emissor ao receptor, as ondas de udio precisam de um meio fsico de suporte, seja o ar da atmosfera, a gua, etc. Tanto assim que no espao exterior, onde no h meio fsico 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 informticas no trabalham com dados analgicos, e sim, que trabalham com dados digitais formados por estados binrios Portanto para representar um
que trabalham com dados digitais, formados por estados binrios. Portanto, para representar um udio, desde o ponto de vista informtico, preciso captur-lo em uma natureza binria, para que se faa uma amostra do mesmo, tomando determinados valores das ondas e representando tais valores em formato digital. Em cada captura obteremos um ponto do grfico anterior.
Porm, quantas amostras deveremos tomar? Este o verdadeiro miolo da questo, j que quantas mais amostras tomarmos, mais fiel ser o udio capturado com respeito ao original, com o que ter mais qualidade. Para medir o nmero de capturas utilizamos a freqncia da amostra. Como um Herz um ciclo por segundo, a freqncia de uma captura em Herz representa o nmero de capturas que realizamos em um segundo. Assim, uma frequncia de amostra de 20 KHz (20 Kilo Herz = 20000 Herz) realizar 20000 capturas de pontos cada segundo. O ouvido humano captar de captar a assombrosa quantidade de 44000 udios por segundo, ou seja, 44 KHz. Portanto, para que um udio digital tenha suficiente qualidade dever estar baseado em uma frequncia similar a esta. Em geral, o valor padro de captura de udios de qualidade de 44,1 Khz (qualidade CD), embora haja capturadoras de udio profissionais que chegam at os 100 Khz, com objeto de obter um maior nmero de pontos sobre a amostra, conseguindo uma qualidade mxima. Outro conceito do que j devem ter ouvido falar sobre o udio digital o nmero de bits de um carto de udio. A origem desta magnitude que, na hora de capturar o udio, no s importante o nmero de amostras tomadas, como tambm a quantidade de informao capturada em cada uma dessas amostras. Uma vez capturado o udio, para sua posterior reproduo em uma mquina informtica necessrio mandar uma srie de impulsos ou posies aos alto-falantes para que criem o udio a partir deles. Como? Bom, produzindo a partir dessas posies movimentos das membranas dos alto-falantes, movimentos que transformam de novo o udio digital em analgico, estado no qual capaz de viajar pelo ar e produzir os estmulos necessrios em nossos tmpanos, com o qual somos capazes de perceber o udio "original". Quantas mais posies 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 como o nmero de impulsos de informao (posies) que se enviam aos alto-falantes para sua transformao em ondas analgicas. Os cartes de udio atuais trabalham normalmente com 8 bits de informao, com os que se podem obter 28=256 posies (zeros e uns binrios), embora haja algumas de melhor qualidade que so capazes de trabalhar com capturas de 16 bits, que originam 216 = 65536 posies de informao. Como dado de referncia, os CDs atuais esto baseados em udio gravado a 44 Khz e com um tamanho de amostra de 16 bits. Estas medidas se conhecem com o nome de udio de qualidade CD. Por ltimo, uma vez que o udio digital chega aos nossos ouvidos, impactam contra os tmpanos, verdadeiras membranas especializadas que voltam a transformar as ondas analgicas em impulsos eltricos, que viajam at nosso crebro, onde so interpretados e produzem as sensaes auditivas que todos ns conhecemos.
Uma exceo ao udio anteriormente descrito, 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 informtica pelo reprodutor digital conhecido pelo nome de MIDI (Music Instrument Digital Interface). Quando se deseja reproduzir uma nota musical concreta, se envia um comando MIDI ao chip sintetizador, que se encarrega de traduzir esse comando em uma vibrao especial que produz a nota. Mediante este sistema possvel criar melodias bastante aceitveis, embora nunca tenham a qualidade, nem a riqueza de uma onda sonora natural capturada.
udio em HTML (III)

Formatos de udio Na hora de incluir arquivos de udios em nossas pginas web devemos distinguir entre os que podem ser diretamente executados 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 incluir na web os seguintes tipos de arquivos de udio. WAV (Wave form Audio File format): formato tpico da casa Windows, de elevada qualidade, usado nas gravaes de CDs, que trabalha a 44 Khz e a 16 bits. Consta basicamente de trs blocos: o de identificao, o que especifica os parmetros do formato e o que contm as amostras. Seu principal inconveniente o elevado peso dos arquivos, pelo qual seu uso fica limitado na Internet reproduo de rudos ou frases curtas. A extenso destes arquivos .wav. suportado por Internet Explorer e Netscape 4x. AU (Audio File format): formato criado pela casa Apple para plataformas MAC, cujos 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 carto de udio ter que interpretar. Por isso, este tipo de arquivos no pode armazenar udios reais, como vozes ou msica gravada; s pode conter udios armazenveis em tabelas de ondas. Como contrapartida, 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 Netscape 4x. MP3 (MPEG 1 Layer 3): desenvolvido pelo MPEG (Moving Picture Expert Group), obtm uma alta compresso do udio e uma muito boa qualidade na eliminao 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 configurar o nvel de compreenso, conseguindo-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 espcie de mistura entre o formato MIDI e o formato WAV, j que por um lado armazena o udio em forma de instrues para o carto de udio, porm por outro pode armazenar tambm udios de instrumentos musicais digitalizados, podendo ser interpretados por qualquer carto 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 com a extenso .au
Real Audio de qualidade mdia, embora permita arquivos muito comprimidos, que salva com extenso .rmp ou .ra. Para sua reproduo necessita-se ter instalado o plugin Real Audio. Na hora de trabalhar com estes formatos de udio, deveremos ter em conta as limitaes em seu uso, j que muitos deles no podem ser reduzidos mais que em sistemas operacionais concretos, e ainda assim, com plugins ou programas especficos. Em busca 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 opo de navegar com msica executvel 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, como Windows Media Player, at aplicaes externas, como Winamp. Neste caso, 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 escrever: <a href="audios/mp3.mp3" target="_blank"> Clique aqui para ouvir a msica. </a> Que nos daria: Clique aqui para ouvir a msica Com isto, o usurio ao clicar o link, se lanar a aplicao que tiver associada com o tipo de arquivo MP3, que depender da configurao interna de cada navegador e usurio. Um caso especial Netscape 6x. Quase no admite diretamente nenhum tipo de formato de udio incrustado na pgina, ao no vir configuradas por padro as aplicaes ou plugins necessrios. E no caso de arquivos linkados, Nestscape 6x costuma lanar seu prprio reprodutor, que costuma ser da casa AOL, precisando para a execuo uma srie de passos para se inscrever nessa companhia como usurio do software. Resumindo: cada usurio ter configurada sua mquina de forma particular, costumando prevalecer o ltimo software de udio instalado, j que estes programas costumam se apropriar de certos tipos de arquivos para sua execuo automtica. Entre as aplicaes possveis de execuo de arquivos de udio, seja de forma direta ou em forma de plugins para os navegadores, destacam-se Windows Media Player, Real Player, Winamp, Quick time, etc.
udio em HTML (IV)

Incluir udios na web. Uma vez escolhidos nossos arquivos de udio, hora de inclu-los em nossa pgina web. Logicamente, 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 incluir 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 incorpora udios de fundo em uma pgina web, udios que se executam automaticamente ao carregar pgina. uma etiqueta proprietria de Microsoft, por isso s 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, com 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 encontra o arquivo de udio a reproduzir. A rota pode ser relativa ao nosso sistema de pastas local, absoluta com respeito ao sistema de pastas do servidor web ou uma URL completa que localize o arquivo em Internet. loop="l" determina o nmero de vexes (l) que se deve executar 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 potncia ou intensidade com que se escutar em cada um deles (direito e esquerdo). Seus valores podem estar entre -10,000 e +10,000, correspondendo o valor 0 a um balance 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 funcionando nesta janela (s Internet Explorer). A etiqueta bgsound admite muitas mais propriedades (disabled, delay, id, class, controls, etc.). Ainda assim, esta etiqueta acessvel em Internet Explorer mediante cdigo JavaScript, podendo modificar em tempo real suas propriedades balance, loop, src, e volume, embora esta ltima s seja acessvel em plataformas PC. Para uma informao completa sobre todas as propriedades e funcionalidades desta etiqueta pode-se visitar a pgina correspondente de Microsoft: http://msdn.microsoft.com/library/default.asp? url=/workshop/author/dhtml/reference/objects/bgsound.asp EMBED Nestcape 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 necessitam portanto a execuo de algum plugin para sua interpretao. Paradoxalmente, Internet Explorer assumiu depois o uso desta etiqueta para a incluso de arquivos de udio, para chegar a interpret-la melhor e ampli-la com mais atributos e propriedades, de tal forma que a execuo de udio com embed atualmente mais cmoda com este navegador, ao incorporar a sute de Microsoft seus prprios plugins para a interpretao dos diferentes formatos de udio. Em troca, se usamos Netscape Navigator nos encontraremos em muitos casos com uma falha na reproduo ou com uma molesta mensagem de necessidade de algum plugin especial (sobretudo nas verses 6x), o que nos obrigar a visitar a pgina de
algum plugin especial (sobretudo nas verses 6x), o que nos obrigar a visitar a pgina de Netscape para seu download e instalao, que muitas vezes no ser efetiva. Seja como for, h que indicar que esta etiqueta nos incluir na pgina web um objeto especial, uma espcie de console de comando, denominada Crescendo, que consta de trs botes, similares ao de qualquer reprodutor de udio: um boto Play, para comear a reproduo (se no estiver estabelecido o automtico), um boto Pause, para deter momentaneamente e um boto Stop, para deter definitivamente (posto a zero). Este console diferente segundo o navegador usado; no caso de Internet Explorer se mostra o tpico console de Windows Media, cujo tamanho podemos configurar, enquanto que em Netscape se mostra um console 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 ocupe, da incluso 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 local, absoluta respeito ao sistema de pastas do servidor web ou uma URL completa que localize o arquivo em Internet. loop="l/true/false", que determina o nmero de vezes que se deve executar o arquivo de udio. Os valores admitidos so l (nmero inteiro de vezes), true (infinitas vezes) e false (s uma vez). S reconhecida por Netscape 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 declara o tipo de arquivo de udio que estamos usando, com o qual o navegador web pode executar 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 comear a se reproduzir por si s ao carregar a pgina ou se ao contrrio, ser preciso a atuao do usurio (ou de cdigo de script) para que comece a audio. pluginspage="URL", que estabelece, no caso de ser necessrio um plugin especial para reproduzir o arquivo, a pgina web onde se pode baixar o mesmo. S se ativa no caso de que o navegador no seja capaz de reproduzir o arquivo por si mesmo, e suportada somente por Netscape Navigator. name="nome", que atribui um nome identificador (deve ser nico na pgina) a uma etiqueta embed determinada, com objeto de ser acessada logo por linguagens de script. volume="v", que determina o volume de reproduo de udio, e que pode variar entre 0 e 100. suportada somente por Netscape Navigator, que no console mostra o valor estabelecido em seu indicador de volume, sendo seu valor padro 50. No caso de Internet Explorer, o valor de volume por padro 50 em plataformas PC, e 75 em MAC, sendo necessrio agir sobre o controle de volume do console para modific-lo. 2. Atributos referentes ao console:
hidden="true/false", que estabelece se o console ser visvel (false) ou no (true). Este um aspecto polmico, j que se ocultamos o console obrigamos ao usurio a ouvir nosso arquivo, sem possibilidade de deter nem de modificar o volume, e se o mostramos estaremos incrustando na tela um objeto que muitas vezes nos romper o esquema de design de nossa pgina. Resta determinar seu uso em cada caso concreto. width="w", que determina a largura visvel do console, em pixels. height="h", que determina a altura visvel do console, em pixels. Estes atributos so tambm muito importante, no caso de que tenhamos estabelecido hidden= "false", j que de seu valor ir depender a correta visulazao do console. No caso de Internet Explorer, que mostra um logo de Windows Media sobre os controles, o tamanho mnimo aceitvel deve ser de 140x100 pixels, j que seno o console sair deformado em excesso ou recortado. E no caso de Netscape Navigator, deveremos atribuir uns valores de 145x60 pixels, que o que ocupa o console; se colocarmos um tamanho menor, o console ser recortado, perdendo funcionalidades, e se atribumos um tamanho maior, aparecero espaos cinzas ao redor do console, tornando o aspecto da pgina feio. Se no especificarmos estes atributos e tampouco hidden, aparecer na pgina somente os comandos do console, sem logotipos adicionados (Internet Explorer) ou o console recortado (Netscape Navigator). align="top/bottom/center/baseline/left/right/ texttop/middle/absmiddle/absbotom", anlogo ao da etiqueta IMG, define o alinhamento horizontal ou vertical do console com respeito aos elementos da pgina. hspace="hs", que estabelece a separao horizontal, vspace="vs", que estabelece a separao vertical, em pixels, entre o console e os elementos da pgina que a rodeiam. Anloga aos seus equivalentes da etiqueta IMG. Estes so os atributos principais, embora possamos encontrar referncias de outros admitidos, apesar de no costumarem ser operacionais na realidade, j que no funcionam de forma correta ou so especficos de Nestcape (como toda a srie de atributos que configuram os controles do console). Exemplo sem console:
<embed src="../audios/mid.mid" hidden="true" type="audio/midi" autostart="true"></embed>
Que podemos ver em funcionamento 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 incluso de arquivos no nativos nos navegadores web se decidiu 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 capaz de incrustar no navegador todo tipo de arquivo. A etiqueta escolhida no padro HTML 4.0 foi OBJECT, a qual se dotou de suficientes atributos e flexibilidade para poder realizar corretamente seu trabalho. Devido a isto a proposta foi usar a etiqueta object tambm para incluir arquivos de udio de todo
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 implementao que a mesma teve varia segundo a do navegador em particular, assim como em funo do objeto a incrustar. Desta forma, Internet Explorer realizou sua prpria implementao da etiqueta object, incluindo nela referncias a filtros e componentes ActiveX especficos para os arquivos de udio. Por seu lado, os navegadores Netscape no suportam corretamente 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 object, umas que funcionam bem, e outras que no. Por que acontece isto? Eu creio que porque Microsoft foi usando a etiqueta object para implementar todo um grande conjunto de componentes prprios, que ademais foram se adaptando s diferentes verses de Internet Explorer. Como regra geral, vlida no s para incrustar arquivos de udio, como tambm para outros tipos, a etiqueta object vai definir um objeto ou componente externo encarregado da reproduo do arquivo, que no caso de Internet Explorer costuma ser algum tipo de controle ActiveX. Mediante object se instancia o objeto, se declara sua URL e suas principais propriedades gerais, e mediante um conjunto de etiquetas especiais, PARAM, se passam os valores que necessita para seu correto funcionamento ou para sua configurao desejada. A sintaxe geral da etiqueta object, para o caso 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 referncia a arquivos de udio, so: classid="identificador_objeto", que fixa a URL do objeto ou componente externo necessrio para reproduzir o arquivo de udio, e a implementao CLSID dos controles ActiveX necessrios. type="tipo_arquivo", atributo importante, que declara 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 console, em pixels. align="top/bottom/center/baseline/left/right /texttop/middle/absmiddle/absbotom", anlogo ao da etiqueta IMG, define o alinhamento horizontal ou vertical do console com respeito aos elementos da pgina. hspace="hs", que estabelece a separao horizontal, vspace="vs", que estabelece a separao vertical, em pixels, entre o console 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 comear a se reproduzir por se s ao carregar a pgina ou se pelo contrrio ser preciso a atuao do usurio (ou de cdigo de script) para que comece a audio.
standby="mensagem", que apresenta em tela uma mensagem ao usurio enquanto carrega o arquivo.
Quanto aos elementos, param os mais importantes so: param name="FileName" value="rota_arquivo", determina a rota ou URL do arquivo de udio a reproduzir. No necessrio utilizar s arquivos WAV ou MID, podendo reproduzir tambm arquivos MP3 ou Real Audio. Explorer inclui o reprodutor do primeiro em ActiveMovie (componente de Windows Media). param name="autostart" value="true/false", indica ao navegador se se deve comear a reproduzir o udio automaticamente ao carregar a pgina ou se pelo contrrio ser preciso que o usurio clique o boto Play para isso. Estes no so todos os atributos e parmetros possveis. Na verdade, quanto aos componentes Microsoft, podemos encontrar uma infinidade de configuraes possveis, que vo nos permitir fixar muitos aspectos dos mesmos. Deixo a cada um a possibilidade de aprofundar no estudo daqueles componentes e propriedades que necessite, porm sabendo que com os elementos vistos acima temos mais que suficiente para apresentar um arquivo de udio em nossa pgina web. xExemplo:
<object classid="C LSID:05589FA1-C 356-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 funcionando nesta janela (somente em Internet Explorer). A etiqueta A. Se at agora vimos como podemos incluir em nossas pginas udios de fundo ou iniciados pelo usurio mediante interao com o console Crescendo, vamos ver agora como 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 considerar o link a arquivos de udios. O arquivo linkado pode ser interpretado diretamente pelo navegador (por ser de reproduo direta ou por ter instalado o plugin adequado) ou pode ser executado por um programa independente que se abra automaticamente (Winamp, Real Audio, etc.), sendo este o caso mais comum. Se o usurio no dispe do programa ou plugin adequado, se abrir uma janela de download do arquivo, com o qual poder salv-lo at dispor da aplicao necessria para sua reproduo. A sintaxe geral neste caso 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 funcionamento nesta janela. Exemplo de arquivo MP3:

<a href="../audios/mp3.mp3">Madonna</a>
Que temos nesta outra janela
Que temos nesta outra janela.

Declarao DOCTYPE em documentos HTML

Neste artigo nos centraremos na declarao DOCTYPE dos documentos HTML. O W3C (World Wide Web Consortium: www.w3.org), encarregado da criao dos Standard webs, define que os arquivos HTML, XML, XHTML devem ter uma declarao de tipo DOCTYPE que deve fazer referncia a uma das trs definies do tipo de documento que existem. Esta declarao deve ser a primeira linha de nosso documento e necessria para dizer ao navegador que verso de HTML a que se usa na pgina. Se no se faz, o navegador processar a pgina em modo Quirks (modo de compatibilidade) podendo no interpretar corretamente o cdigo da pgina. A DTD (definio do tipo de documento) a estrutura regulamentar, ou seja, os elementos e atributos que esto disponveis para cada tipo de documento. Para HTML 4.01 (as verses anteriores no so recomendveis devido a que no so totalmente compatveis com as Folhas de Estilo), existem 3 tipos de DTD: 1. HTML 4.01 transitrio O HTML 4 transitrio inclui todos os elementos e qualidades de HTML 4 Strict, porm agrega qualidades "presentational", elementos desaprovados ou elementos obsoletos. Chama-se Transitional porque est pensado como 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 documentos 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 declararmos este DTD, o navegador passar a agir em cumprimento dos padres (Standards compilam-se). Isto implicar que s possam se usar as etiquetas de HTML 4.01. Este o modo recomendado pelo W3C, j que compatvel com o CSS e pode ser interpretado corretamente por todos os navegadores, tornando muito mais fcil o passo de nossos documentos 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/strict.dtd\"> Se quisermos saber se nossa pgina cumpre com o DTD definido podemos faz-lo desde http://validator.w3.org/
Informe de Jose A. Molina e-mail: info@webmolina.net
Atributo nofollow nos links

Deixaremos aqui uma pequena resenha sobre um atributo que est se convertendo em essencial nos links e que no tnhamos comentado em nosso manual de HTML, embora sim que vimos algo em nosso manual de posicionamento em buscadores. Nofollow um atributo dos links HTML (etiqueta <A>), que serve para definir ou marcar o comportamento dos buscadores quando rastreiam nossa pgina web em busca de contedos para index-los. Por padro, quando um buscador visita uma pgina web vai percorrendo todos seus links e vai indexando seu contedo em seu banco de dados de pginas. Isto algo que fazem automtica e periodicamente. Ocorre tanto com os links internos a outras pginas de nosso site como com os links externos a outras pginas web. Os motores que percorrem as webs de link a link, se chamam aranhas. Pois bem, ns podemos atravs do atributo rel="nofollow", dizer a um buscador que no continue indexando os contedos 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 comentar que o atributo foi criado por iniciativa de Google e Blogger em 2005, como uma idia para deter o spam de links em websites que permitem aos usurios a participao. Uma prtica comum das pessoas que pretendem divulgar uma pgina web realizar comentrios ou participaes em pginas web, nas que inserem links aos seus prprios sites. Isto se conhece como spam de links, ou com 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 interao com a comunidade de visitantes. Algumas pginas como 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 limitao e sem ter que pagar nada. Como os buscadores interpretam o Nofollow O atributo tido em conta no s pelo motor de indexao (aranha) do buscador Google, como tambm por outras aranhas de buscadores to importantes como Yahoo! ou MSN. Entretanto h que dizer que cada buscador faz um uso particular do atributo. Temos que esclarecer que os buscadores muitas vezes seguem o link que se marcou como nofollow, visitando aquela web que se linkou. O que ocorre 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 com a divulgao de uma pgina web, visto que altera diretamente o comportamento dos buscadores ao rastrear as pginas, link a link. Sendo assim, os SEO, divulgadores de pginas ou pessoas que trabalham no posicionamento em buscadores, tm muito em conta em suas tcnicas para seu trabalho do dia. Existem diversas tcnicas que utilizam este atributo para realizar promoo de webs, como a que explicamos no artigo Arriscada, mas excelente tcnica SEO usando rel=nofollow, porm o uso mais importante o que se comentou j neste artigo: coloc-lo aos links externos para no transferir ranking ou posicionamento desde nossa web a outras webs externas.
Outra tcnica relacionada com nofollow, porm mais segura, para que no se indexe parte do contedo de nossa pgina, o uso do arquivo robots.txt, que j comentamos anteriormente em CriarWeb.com.
Etiqueta Iframe
Os frames (frame em ingls significa moldura) so umas ferramentas que tiveram uma histria dilatada no desenvolvimento de pginas web com HTML. De ser uma etiqueta no padro passou a ser suportada por todos os navegadores e fazer parte das especificaes de HTML. Por outro lado, o frame sempre foi uma utilidade para fazer pginas web de uso como mnimo controvertido, visto que tem certas desvantagens que muitas vezes so mais importantes que a indubitvel praticidade. Em qualquer caso, em CriarWeb.com j falamos suficiente sobre a etiqueta Frame e tratamos amplamente suas vantagens e inconvenientes. Neste artigo iremos falar de uma etiqueta "irm" que atualmente muito mais usada, porque mais til e menos problemtica que os prprios frames. Trata-se de iframe, uma tag includa nas especificaes de HTML 4.0.
Nota: iframe vem de inline frame, porm em portugus tambm se poderia chamar de frames flutuantes
Referncias sobre a etiqueta frame: Frames em HTML Vantagens e inconvenientes do uso de frames Frames - Explicao bsica Frames sem bordes Frames - Atributos avanados Atualizar dois frames com um s link Frames - Uma pgina em cada moldura ... Teoricamente iframe serve para criar um espao dentro da pgina onde se pode incrustar outra web. um quadrado cujas dimenses o desenvolvedor deve especificar na prpria etiqueta iframe, que tem associada uma pgina web que se carrega em tal espao. Essa pgina web ter seus prprios contedos e estilos, independentes do contexto onde se est mostrando. Ademais ser perfeitamente funcional: se tiver links se mostraro nesse mesmo espao e se tiver scripts ou aplicaes dentro se executaro tambm de maneira autnoma no espao reservado ao iframe. Exemplos de uso de iframe Iframe se utiliza em muitos contextos. Dentro de um iframe podemos mostrar contedos de outras pginas, como se estivessem na nossa, como por exemplo: Cdigos de banner, que se invocam por meio de um iframe pedindo os dados do banner geralmente a um servidor de banners que pode estar em outra rede. Visualizar contedos de terceiros, como blocos de notcias ou novidades que oferecem em outras webs. Interfaces de usurio, em que certas 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 diferena principal est baseada em que a etiqueta iframe no necessita uma declarao dos espaos dos frames ou frameset, porque se incrusta no cdigo HTML da pgina. O iframe, portanto, no provoca problemas de navegao, como os que ocorrem com os frames normais se no se entra corretamente atravs do frameset. 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 busca. Por dizer de alguma maneira, trabalhar com iframe ou frames flutuantes to simples como fazer uma tabela, que se codifica dentro da construo HTML, com seu espao reservado dentro da pgina. Sendo assim, a nica 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 coloca diretamente no cdigo 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 principais de iframe so a pgina web que se mostrar no espao e a largura e altura da moldura que reservemos para o frame flutuante. Como se pode ver, a etiqueta iframe tem sua correspondente etiqueta de fechamento. Todo o texto que colocarmos entre a etiqueta de incio e a de fechamento 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 indicar 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 especificar o nome do frame, que podemos utilizar logo para nos referirmos a ele com o target dos links, ou mediante javascript. id: Para indicar o identificador do iframe, e poder nos referir a ele atravs de javascript. 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: indica se se quer que apaream barras de deslocamento para ver os contedos do iframe completo, no caso em que no apaream no espao reservado para o iframe. Os valores possveis so: yes | no | auto. O valor "yes" para que apaream sempre as barras de deslocamento ou barras de scroll, "no" serve para que no apaream 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, com respeito borda. Esta margem vai em pixels, porm prevalecer a margem que possa ter atribuda a pgina web que mostremos no frame flutuante. marginheight: o mesmo que marginwidth porm neste caso para o tamanho da margem pela
marginheight: o mesmo que marginwidth, porm neste caso para o tamanho da margem pela parte de cima e de baixo. margin: para especificar alinhamento do frame, assim como se especifica para as imagens. style y class: os atributos para definir o aspecto do iframe por meio de folhas de estilo css. Para acabar, aqui vemos outro exemplo de iframe com 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 declarao do DTD usado ao construir um documento HTML ou XHTML. Entretanto, para ser um pouco mais restritos, devemos esclarecer 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 esclarecer tambm que DTD significa Definition Type Document e uma declarao 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 conhecer mais o que um DTD no artigo do manual de XML de CriarWeb.com: DTD e XML Schema. Assim, voltando atrs, poderamos dizer que os documentos HTML ou XHTML esto escritos em uma linguagem e com o Doctype especificamos esta linguagem e a verso da mesma. Os navegadores lero esta declarao de doctype e interpretaro a pgina atendendo s regras definidas nessa linguagem. Nota: Para os navegadores importante conhecer o doctype da pgina web, porque desse modo podem mostrar a pgina web com a verso exata da linguagem HTML ou XHTML com a que foi construda. Se no tm uma declarao de doctype, interpretaro a pgina no que se chama "quirks mode", um modo que procura maximizar a compatibilidade da pgina com verses anteriores da linguagem HTML. De modo que a utilizao da etiqueta necessria se desejamos cumprir um padro de HTML ou XHTML, para especificar que verso ou linguagem utilizamos e que o browser identifique a pgina conforme tal padro. O DOCTYPE tem uma forma como 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 incluir na primeira linha do cdigo HTML da pgina. Por explicar de alguma maneira esta etiqueta, que parece meio complicada, diz que um DOCTYPE de um documento HTML e nos d dois dados adicionais. Com o texto "-//W3C//DTD XHTML 1.0 Transitional//EN" indicamos que este documento se tem que validar com a especificao de XHTML 1.0 e que o tipo de documento 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 documento, que havamos assinalado como Transitional no doctype expressado antes, quer dizer que o documento utiliza um leque mais amplo de etiquetas HTML e atributos, inclusive l t fi d b l t H t d i ti d d t P l d t
alguns que possam ter ficado obsoletos. H outros dois tipos de documentos. Por um lado, temos strict, que indica que o cdigo HTML ou XHTML estrito, sem incluir atributos e etiquetas em desuso. O outro tipo de documento que falta o frameset, que se utiliza quando estamos realizando uma declarao de frames ou frameset. Portanto, dependendo de nossa pgina e do cdigo que utilizarmos, teremos que declarar um ou outro doctype. Existem diversos Doctype que abrangem uma grande gama de possibilidades, configurando distintas verses de HTML ou XHTML e distintos tipos de documento, strict, transitional ou frameset. Este artigo de criarweb .com se completa agora com 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 colocar em um website dispomos de uma variedade ampla de meta-informaes para comunicar a qualquer sistema que leia nossa pgina web. Neste artigo vamos apresentar uma etiqueta interessante para definir como se tm que comportar os motores de busca na hora de visitar nossa pgina e mostr-la entre os resultados de buscas realizados no buscador. Trata-se da etiqueta meta de robots. A etiqueta META de Robots serve para personalizar o comportamento de robots de indexao, tipo Google, na hora de processar nossa pgina web. Cada uma das pginas de nosso site pode ter uma declarao da etiqueta meta de robots distinta, com o qual podemos inclusive definir de maneira independente como desejamos que se trate cada uma das pginas que compe o web. Em CriarWeb.com publicamos anteriormente informaes sobre distintas etiquetas META em artigos. Etiqueta ROBOTS de META Tags Como dissemos, a etiqueta robots, dentro das possveis etiquetas com Meta-informaes sobre um documento web, serve para levar um controle exaustivo do que pode ou no pode fazer um
, p q p p robot de indexao quando visita nosso website. Os comportamentos mais tpicos 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.
Agora vejamos como 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 essenciais: Name: que para a etiqueta META que controla os comportamentos em motores de indexao o valor "robots". Content: se indica 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 colocar as diretrizes que desejarmos para buscadores, tantas como desejarmos, separadas por vrgulas. As distintas diretrizes a aplicar so as seguintes: INDEX / NOINDEX Serve para indicar se se deseja ou no permitir a indexao da pgina pelos motores de busca. FOLLOW / NOFOLLOW Com esta diretriz se indica se se deve ou no permitir aos motores de busca percorrer ou seguir percorrendo a web atravs dos links que encontre no corpo do documento. ARCHIVE / NOARCHIVE Isto permite dizer se desejamos ou no que o motor de busca arquive o contedo do website em seu cach interno. Como pudemos ver, buscadores como Google tm um cache e podemos ver as pginas web tal como as tem "cacheadas" o buscador. Para isso, nos resultados das buscas aparece um link que pe cache. Se dissemos que no arquive a pgina, no deveria mostrar esse link de cache. Isto na verdade, segundo Google, no evita que se salve em cache a pgina, e sim que no permite v-la aos usurios do buscador e portanto no mostra o link. SNIPPET / NOSNIPPET Esta diretriz princpio no resulta muito til, pelo menos a primeira vista. Serve para que o motor de busca no mostre nenhuma descrio de um site, s seu ttulo. Se utilizar NOSNIPPET automaticamente define um NOARCHIVE, por isso que a pgina tampouco se mostrar em cache. ODP / NOODP Serve para dizer ao buscador que deve, ou no, mostrar o ttulo e descrio da pgina iguais aos que se encontra no Open Directory Project. Em alguns casos, alguns buscadores mostram como ttulo e descrio de uma web os que se publicaram no ODP (http://www.dmoz.org/). YDIR / NOYDIR basicamente o mesmo que ODP / NOODP, com a diferena que para que no se possa, ou se, mostrar a descrio e ttulo que aparece no diretrio de Yahoo. Quando no existe esta etiqueta os buscadores interpretam as condies mais favorveis para eles, ou seja, que podem fazer tudo o que costumam fazer com outras pginas a nossa, como index-la, seguir seus links, arquiv-la, etc. Exemplos de etiquetas META ROBOTS Na hora de utilizar a META ROBOTS basicamente o que podemos fazer restringir as possibilidades dos motores de busca visto que as possibilidades por padro so as menos
possibilidades dos motores de busca, 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">
Podemos definir ento casos mais restritivos como estes:

<META name="robots" content="INDEX,NOFOLLOW">
Para indicar 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 indicar que no queremos que se sigam os links da pgina.

<META name="robots" content="NOINDEX,NOFOLLOW">
Para indicar que no queremos que se indexe a pgina nem que se sigam os links que possa conter.
<META name="robots" content="NOARC HIVE">
O nico que indicamos que no se mostre o link para ver a pgina no cache do buscador.
<META name="robots" content="NOINDEX,NOFOLLOW,NOARC HIVE,NOODP,NOSNIPPET">
Com esta restritiva etiqueta foramos para que no se indexe a pgina, no se sigam os links, no se mostre o link de cache, no se mostre o ttulo e descrio do Open Directory Project e s se mostre o ttulo da pgina nos resultados das buscas.
O futuro do desenvolvimento web: HTML 5

No momento de escrever este artigo, a especificao de HTML 5 est ainda em fase de prova, no obstante, em alguns navegadores, recentemente esto se colocando em funcionamento, de forma experimental, algumas das caractersticas que trar consigo este novo padro. Paralelamente, vo surgindo novas informaes e referncias que explicam o que HTML 5, o que faz com que nos sintamos cada vez mais impacientes por conhecer bem as novas particularidades da linguagem e sobretudo, por come-las a aplicar em nossos desenvolvimentos. Este artculo de CriarWeb.com pretende oferecer algumas pistas para conhecer o caminho que atualmente est percorrendo a linguagem de marcao para se converter em uma realidade, e ainda explicar um pouco quais so as novidades mais importantes que esto por vir.
Por que se cria HTML 5

Aos que se dedicam a fazer pginas web sabem que um website como um quebra-cabea de tecnologias que operam entre si. Para fazer uma pgina, princpio , se necessita simplesmente HTML, porm esta afirmao hoje tem pouco a ver com a realidade e com as necessidades dos desenvolvedores para criar uma rica experincia de usurio. que hoje poucos websites se baseiam unicamente em HTML. Pode-se utilizar CSS para definir o aspecto da pgina, algum tipo de script do lado do cliente, em Javascript, vdeos em diversos formatos ou Flash para realizar alguma animao ou interao com o usurio. Para poder se beneficiar e integrar todas estas tecnologias, existem uma infinidade de etiquetas que se foram criando, segundo iam se necessitando, e as quais no passaram pelo filtro dos normalizadores de tecnologias como o W3C. Portanto mais de 10 anos depois que se publicasse a ltima especificao do HTML resulta
Portanto, mais de 10 anos depois que se publicasse a ltima especificao do HTML, resulta primordial para o futuro da web a criao de um novo padro que recolha e solucione de alguma maneira, as necessidades dos desenvolvedores que se foram criando ao longo de todo este tempo.
Esforos em diversas vertentes para a criao de HTML 5

Sem dvida j faz tempo que se necessitava esta nova especificao, que hoje ainda est em fase de prova e poderamos nos perguntar: Por que se passou tanto tempo sem se publicar esta nova verso da linguagem? A resposta que HTML 5 se converteu em um projeto muito ambicioso, onde h muitas pessoas, empresas e instituies que tm muito que opinar. de vital importncia, portanto, coordenar a todos os implicados para criar um nico ponto comum, que assegure esta vez um xito da tecnologia como um padro. princpio, os encarregados 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 criando 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 comunidade de pessoas interessadas em melhorar e modernizar a linguagem de marcao. Este novo grupo, chamado WHATWG (Web Hypertext Application Technology Working Group), se criou a raiz de uma conferncia do W3C com pessoas integrantes das equipes de desenvolvimento de Apple, a Fundao Mozilla e Opera, ao que se foram agregando pessoal de Microsoft e outras empresas implicadas no mundo web. O WHATWG, que funciona de maneira independente do W3C, tem como objetivo principal trabalhar na nova especificao do HTML 5 e a eles devemos muitos dos avances que esto por chegar com relao linguagem. uma organizao aberta, onde qualquer um pode participar livre e gratuitamente. De fato, segundo comentam em sua web, esto realmente interessados nas opinies e interesses das pessoas que trabalham com o desenvolvimento web, para criar umas especificaes que respondam s necessidades reais dos profissionais da Internet.
Links relacionados
Para a documentao dos leitores, publicamos os links s provas de especificaes do HTML 5 e as organizaes que trabalham nelas: W3C HTML Working Group: http://www.w3.org/html/ WHATWG http://www.whatwg.org ltima verso publicada das especificaes de HTML 5 http://www.w3.org/TR/html5/ Especificaes do HTML 5 pela WHATWG http://www.whatwg.org/specs/web-apps/current-work/multipage/
Concluso
Pudemos comprovar que existem numerosos esforos para a criao das novas especificaes do HTML 5, realizados por distintas organizaes, independentes, porm que trabalham em uma frente comum. No prximo artigo veremos, quando estar pronto e quais so as principais novidades que trar.
O que HTML 5
No artigo anterior publicado em CriarWeb.com, "O futuro do desenvolvimento web: HTML 5" explicamos as razes pelas quais verdadeiramente importante esta nova verso da linguagem de marcao HTML e vimos quem so os que esto realizando sua especificao. Agora nos convm explicar o que exatamente HTML 5, j que no simplesmente uma nova verso da linguagem de marcao HTML, e sim um agrupamento de diversas especificaes concernentes 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 especificaes, entre as que se encontram: HTML 4 XHTML 1 DOM Nvel 2 (DOM = Document Objetc Model) HTML 5 pretende proporcionar uma plataforma com a que desenvolver aplicaes web mais parecidas s aplicaes de rea de trabalho, onde sua execuo dentro de um navegador no implique falta de recursos ou facilidades para resolver as necessidades reais dos desenvolvedores. Para isso se esto criando umas APIs que permitam trabalhar com qualquer dos elementos da pgina e realizar aes que at hoje era necessrio realizar por meio de tecnologias acessrias. Estas API, que tero que ser implementadas pelos distintos navegadores do mercado, se esto documentando detalhadamente, para que todos os Browsers, criados por qualquer companhia as suportem tal qual se desenharam. Isto se faz com a inteno que no ocorra o que vem acontecendo no passado, que cada navegador faz a guerra por sua parte e os que acabam pagando-o so os desenvolvedores e os usurios, que tm muitas possibilidades de acessar a webs que no so compatveis com seu navegador preferido.
Quando estar pronto HTML 5

Segundo informam na pgina da organizao WHATWG, HTML 5 prev que esteja pronto como especificao de implementao recomendada 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 caractersticas da moderna linguagem. que HTML 5 est formado por muitos mdulos distintos, cujo grau de especificao est em nveis desiguais. Portanto, muitas das caractersticas de HTML 5 esto j prontas para ser implementadas, em um ponto de desenvolvimento que se encontra prximo ao que finalmente ser apresentado. Outras muitas caractersticas esto ainda simplesmente de molho, a modo de idias ou rascunhos iniciais. De fato, as verses mais novas de quase todos os navegadores, includo o polmico Internet Explorer 8, implementam algumas das caractersticas 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, poucas so as utilidades realmente disponveis da linguagem, se queremos fazer um website compatvel. No obstante, no pior dos casos, podemos comear a usar a nvel experimental estas caractersticas, 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 incorporar novas etiquetas ou eliminar outras, e sim que se supe melhoras em reas que at agora ficavam fora da linguagem e para as que se necessitava utilizar outras tecnologias. Estrutura do corpo: A maioria das webs tm um formato comum, formado por elementos como cabealho p navegadores etc HTML 5 permite agrupar todas estas partes de uma
como cabealho, 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 incorporar diversos tipos de contedo enriquecido, como animaes Flash ou vdeo. Agora se utilizaro etiquetas especficas 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 usurio. algo assim como as possibilidades que nos oferece Flash, porm dentro da especificao 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 local, com 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 informao, o que permitir a criao de aplicaes web que funcionem sem necessidades de estar conectados a Internet. Web Workers: so processos 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 comear a usar a pgina. Para isso, se dispe tambm de um API para o trabalho com os Web Workers. Aplicaes web Offline: Existir outro API para o trabalho com aplicaes web, que se podero desenvolver de modo que funcionem tambm em local e sem estar conectados a Internet. Geolocalizao: As pginas web se podero localizar geograficamente por meio de um API que permita a Geolocalizao. Novas APIs para interface de usurio: temas to utilizados como o "drag & drop" (arrastar e soltar) nas interfaces de usurio dos programas convencionais, sero incorporadas ao HTML 5 por meio de um API. Fim das etiquetas de apresentao: todas as etiquetas que tm a ver com a apresentao do documento, ou seja, que modificam estilos da pgina, sero eliminadas. A responsabilidade de definir o aspecto de uma web correr a cargo unicamente de CSS. Como se pode ver, existiro vrios API com os quais poderemos trabalhar para o desenvolvimento de todo tipo de aplicaes complexas, 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.
Introduo ao HTML5 e Internet Explorer 9

HTML5 uma nova especificao que atualmente se encontra em fase de verso de testes (W3C Working Draft 19 October 2010) e que unifica dois elementos tecnolgicos. HTML5 a evoluo, por um lado do que tem sido at agora a linguagem de marcao HTML4, e por outro lado da API Document Object Model 2 (DOM2). Antes de comear a ver a sintaxe da linguagem, temos que deixar muito claro que HTML no vai ficar somente em uma simples redefinio de etiquetas de marcao seno que vai muito mais alm. Atravs do HTML5 vamos dispor de novas API's que vo tentar ajudar os desenvolvedores a gerar aplicaes web muito mais dinmicas e ricas, tendo sempre claro o ponto de vista de que a maioria dessas interfaces de programao se encontram em fase de teste e por isso podemos afirmar que no esto maduras para implementao em grandes projetos ou aplicaes por parte das organizaes.
Historia do HTML 5
Desde que a IBM comeou a utilizar sua linguagem GML at o momento atual em que nos encontramos foram muitas as mudanas tecnolgicas que se produziram. Com a chegada da linguagem GML transformando-se em standard formal em 1986 (Standard Generalized Markup
g g ( p Language) a IBM proporcionou uma linguagem que definia como deviam ser as linguagens de marcao porm, no especificava como tinham que ser as etiquetas. A partir do SGML comea a se desenvolver o HTML com os seguintes fatos importantes na sua linha de tempo: 1995: Formaliza se o HTML 2.0 e com isso a sintaxe e a maioria das regras que se encontram atualmente implementadas 1997: HTML 3.2 durante muito tempo ignorado pelas empresas que provem navegadores, as quais implementam suas prprias etiquetas 1998: Pressionadas pela adoo dos standards web, se confere peso s recomendaes do W3C e se promovem navegadores com base em tais padres 1999: Estabiliza se a sintaxe e a estrutura do HTML 4.0, convertendo-se no standard para a web 2000: Nasce o XHTML 1.0 desenhado para adaptar o HTML ao XML. Uso de DTD para renderizar como HTML 2000-2004: O incremento das conexes na banda larga alto, produzindo-se uma demanda no campo do desenvolvimento das aplicaes e da multimdia, onde tecnologias como Flash e Ajax fazem com que se trabalhe na especificao XHTML 2.0 2004: No satisfeitos com a direo de XHTML, Apple, Mozilla e Opera propem evoluir o padro HTML 4.0. Embora rejeitados, formam o WHATWG (Web Hypertext Application Technology Working Group) 2005: Publica-se a verso de testes de trabalho Web Applications 1.0 2007: O W3C adota o trabalho de WHATWG em um novo captulo, publicando o que seria a verso de testes de trabalho de HTML 5 2009: ltima chamada expedido para o projeto de trabalho de HTML 5. O W3C no renova XTML 2.0 2010: Verso do W3C para HTML5 Est previsto que o HTML5 alcance a condio de candidato em 2012, finalize os testes finais em 2020, e alcance a categoria de recomendao de pleno direito em 2022.
Imagem 1: Evoluo da linguagem de marcao HTML No artigo seguinte veremos as principais mudanas que incorpora o HTML5.
Informe de Alejandro Martn Bailn-Traduo CRV
Comeando com HTML 5

Neste segundo artigo do manual de HTML5 e Internet Explorer 9 comeamos a analisar detidamente o que HTML5.
Aviso aos navegantes: Nem tudo HTML 5
Voltamos a transmitir a ideia de que tudo aquilo proporcionado pela verso de testes de HTML5 no s linguagem HTML j que, parte de dispor de novas etiquetas, tambm vamos dispor de novas API's de desenvolvimento. Isto implica que devemos ter muito cuidado no desenvolvimento de nossas aplicaes web j que o consrcio WHATWG prope novas API's, novos elementos, etc. que podem ser descartados pelo W3C e vice-versa. Um exemplo do comentado o uso da API armazenamento web SQL proporcionada com HTML5. Devido s limitaes existentes no armazenamento web (todos sabemos o limitado que so as cookies quanto capacidade de armazenamento com apenas 4 Kb), HTML5 props o uso da API de armazenamento web SQL local e por isso alguns fabricantes de navegadores (no todos, graas a deus) proporcionaram suporte tal API. O resultado final do desenvolvimento desta API por parte do W3C foi sua descontinuidade. Vocs podem imaginar a cara dos chefes de projeto que quiseram inovar (digamos assim) desenvolvendo uma aplicao web com armazenamento web SQL.
Outro exemplo expoente do indicado tambm pode ser a API Web Socket e todos os problemas de segurana associados a ela, o que ocasionou que navegadores to conhecidos como Opera ou Firefox, que tinham dado suporte a tal interface de desenvolvimento, tenham tido que dar marcha atrs e eliminar o suporte de seus navegadores. Este tipo de acontecimentos no esto acontecendo com Internet Explorer de Microsoft j que s se esto implementando aquelas API's que se encontrem em uma fase de desenvolvimento estvel e madura.
Comeando com HTML5

A continuao, vamos indicar as principais mudanas que incorpora HTML5: Declarao de tipo de documento Um dos elementos mais bvios, e dos primeiros que temos que assimilar, que Internet Explorer 9 no entende um documento HTML5 a no ser que se especifique a declarao de tipo de documento. diferena da especificao anterior onde dispnhamos de trs declaraes de tipo de documento, agora s h que especificar uma: <!DOCTYPE HTML>
Estrutura do documento A segunda das novidades a ser assimilada em HTML5 o uso de um novo conjunto de etiquetas para dar estrutura a um documento HTML abandonando o uso de tabelas e etiquetas div para a
para dar estrutura a um documento HTML, abandonando o uso de tabelas e etiquetas div para a maquetao das pginas.
Graas a estas novas etiquetas podemos estabelecer a estrutura de contedo para as zonas ou oselementos mais habituais que se costumam encontrar em um website, como podem ser cabealhos, ps de pgina, menus de navegao, contedos relacionados, etc. para mais adiante aplicar estilos visuais mediante folhas de estilos CSS3. Outras etiquetas HTML5 tambm inclui novas etiquetas para identificar dados de tipo data, valores que expressem importes ou quantidades numricas ou a realizao de nfase em palavras ou textos que a exijam, assim como de etiquetas para realizar publicao e manejo de dados.
Os formulrios HTML foram melhorados com uma redefinio de novos tipos de elementos para a etiqueta input, eliminando a sequido ou a falta de tipos de dados que existiam para os formulrios em HTML 4. Tambm foram incorporados linguagem novos atributos para os elementos de formulrio que sero uma delcia para os webdesigners.
Etiquetas no suportadas Temos de ter em conta, para futuros desenvolvimentos ou desenhos a serem realizados sobre entornos web, que HTML5 abandonou algumas etiquetas, ou porque perderam seu significado, ou ento porque sua funcionalidade foi coberta por outras etiquetas diferentes.
No prximo artigo vamos ver um exemplo de estrutura e como implementar estilos CSS3.
Informe de Alejandro Martn Bailn-Traduo CRV
Todos os direitos de reproduo e difuso reservados
Voltar

Manual de HTML - Manual Completo

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual de HTML - Manual Completo

Загружено:

Авторское право:

Доступные форматы

Prlogo ao manual de HTML

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

Sua primeira pgina

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 justificao ao centro:

Que seria: Texto alinhado ao centro

Para justificar direita:

Cujo efeito seria: Texto alinhado direita

Ser visto dessa maneira na pgina:

Ser visto dessa maneira na pgina:

Pode-se ver o exerccio 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:

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

Cor, tamanho e tipo de letra

Este texto maior

Atributos para pginas

Pode-se ver o efeito de colocar este fundo em uma pgina a parte.

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

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

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

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

Links externos, de correio e para arquivos

Informe de Miguel Angel Alvarez - Traduo de JML

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

Alinhamento de imagens com HTML

Isto est debaixo da imagem.

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

Formatos grficos para pginas web

Um logotipo um exemplo claro de imagem GIF

Parte desta imagem transparente

Uma fotografia com formato JPG

GIF 256 cores - 11,1 KB

GIF 16 cores - 7,3 KB

GIF 4 cores - 3,9 KB

JPG qualidade 20 5,9 KB

Para conseguir uma cor, misturaremos valores desta maneira:

Verde turquesa #339966

00 33 66 99 CC FF Exemplos: #3366FF #FF9900 #666666 Consegue-se as seguintes cores:

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

1, linha 1</td> 2, linha 1</td> 1, linha 2</td> 2, linha 2</td>

Tabelas em HTML. Atributos para filas e clulas.

Tabelas em HTML. Atributos da tabela e concluso.

Exemplo de tabela centralizada

Clula da tabela principal

Floresta tropical, clima de savana, clima martimo com invernos secos.

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

Elementos de formulrios. Campos de texto.

O nome do elemento do formulrio de grande importncia para poder identific-lo em nosso

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

Outros elementos de formulrios

<select name="estao" size="3" multiple> A lista ficar desta forma:

Boto Submit, Apagar Campos e outros em formulrios HTML

p , p todas estas funes. boto Submit (ou de envio)