Manual de HTML - Manual Completo

Manual de HTML

Manual de: Criar Web, manuais e recursos para desenvolvimento web

Versão on-line: http://www.criarweb.com/manuais/2

Prólogo ao manual de HTML

Bem-vindos ao manual de HTML de Criarweb. Através de todos estes capítulos vamos descobrir alinguagem utilizada para a criação de páginas web: o Hyper Text Markup Language, maisconhecido como HTML.

À princípio, o fato de falar de uma linguagem informática pode fazer com que alguém se desanime,mas não é para se assustar, pois o HTML não deixa de ser mais que uma forma um tanto peculiarde dar formatos aos textos e imagens que pretendemos ver por meio de um navegador.

Antes de começarmos este manual, o qual faremos de uma forma direta e prática, lherecomendamos fervorosamente a leitura prévia de nosso manual Desde zero. A partir deste guia,você aprenderá os conceitos básicos necessários para a criação de um web site. E também lhepermitirá acessar este manual já com alguns conhecimentos de base imprescindíveis sobre HTML,além de lhe deixar bem claro o que seu conhecimento contribui em relação ao simples uso deeditores HTML.

As pessoas que enfocamos neste manual são todas aquelas que com conhecimentos mínimos deinformática, desejam fazer mundialmente público uma mensagem, uma idéia ou uma informação,usando para isso o meio mais prático, econômico e atual: a Internet.

O que se necessita como base para se obter um bom aprendizado (além de ler o manual Desdezero) é:

Saber escrever com um tecladoSaber manusear um mouseTer vontade de aprender

O que se obterá depois de haver passado por estes capítulos:

Capacidade para criar e publicar seu próprio site web com um mínimo de qualidadeConhecimentos de todo tipo sobre as tecnologias e ferramentas empregadas no âmbito daRedePossivelmente um interesse ou um gostar que pode se converter em paixão, e terminar emalguns casos, sendo um vício ou um trabalho.

Vale lembrar que estamos a sua inteira disposição para resover todo o tipo de dúvidas referentesa este manual. E para entrar em contato conosco é tão fácil como clicar sobre o e-mail do autordo artigo situado ao pé da página.

Passamos então, sem mais preâmbulos, a ver o que se trata o HTML...

Informe de Miguel Angel Alvarez - Tradução de JMLe-mail: [email protected]

Introdução ao HTML

HTML é a linguagem com que se escrevem as páginas web. As páginas web podem ser vistas pelousuário mediante um tipo de aplicação chamada navegador (browser). Podemos dizer portanto,

que o HTML é a linguagem usada pelos navegadores para mostrar as páginas webs ao usuário,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 relação aos livros e revistas, o HTML nospermite a introdução de referências a outras páginas por meio dos links hipertextos.

O HTML se criou a princípio com objetivos de divulgação. Porém, não se pensou que a webchegaria a ser uma área de ócio com caráter multimídia, de modo que, o HTML se criou sem darrespostas a todos os possíveis usos que lhe dariam posteriormente e ao todo coletivo de genteque o utilizariam no futuro. Entretanto, frente a este deficiente planejamento, com o tempo,foram se incorporando modificações, as quais são os padrões do HTML. Numerosos padrões já seapresentaram. O HTML 4.01 foi o último padrão feito até o mês de abril de 2004.

Esta evolução tão anárquica do HTML, trouxe toda uma série de incovenientes e deficiências quetiveram que ser superadas com a introdução de outras tecnologias acessórias capazes deorganizar, optimizar e automatizar o funcionamento das webs. Exemplos que podem soar comoconhecidos são as CSS, JavaScript ou outros. Veremos mais adiante em que consistem algumasdelas.

Alguns dos problemas que acompanham ao HTML é a diversidade de navegadores presentes nomercado, os quais não são capazes de interpretar o mesmo código de uma maneira unificada. Istoobriga ao webmaster a, uma vez criada sua página, comprovar que esta pode ser lidasatisfatoriamente por todos os navegadores, ou pelo menos, pelos mais utilizados.

Além do navegador necessário para ver os resultados de nosso trabalho, necessitamosevidentemente outra ferramenta capaz de criar a página em si. Um arquivo HTML (uma página)não é mais do que um texto. É por isso que para programar em HTML necessitamos um editor detextos.

É recomendável 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 ouMicrosoftWord, pois colocam seu próprio código especial ao salvar as páginas e como o HTML éunicamente texto plano, poderemos ter problemas com isso.

Existem outros tipos de editores específicos para a criação de páginas web, os quais oferecemmuitas facilidades que nos permitem aumentar nossa produtividade. Porém, é aconselhável àprincípio utilizar uma ferramenta, o mais simples possível para poder prestar a máxima atenção aonosso código e familiarizarmos o antes possível com ele. Logo mais adiante, ganharemos tempo aoutilizarmos os editores mais versáteis.

Par ter mais claro todo o tema de editores e os tipos que existem, visite os artigos:

Editores de HTMLBloco de notasTambém se pode acessar a descrições de editores mais complexos que o Bloco de notas,porém mais potentes como o Homesite.

É importante ter claro tudo isso visto que em função de seus objetivos, pode ser que mais do queaprender HTML, resulte mais interessante aprender o uso de uma aplicação para a criação depáginas.

Sendo assim, uma página é um arquivo onde está contido o código HTML em forma de texto.Estes arquivos tem extensão .html ou .htm (é indiferente qual deles utilizar). De modo que quandoprogramarmos em HTML, o faremos com um editor de textos e salvaremos nossos trabalhos comextensão .html, por exemplo, minhapagina.html.

Conselho: Utilize sempre a mesma extensão em seus arquivos HTML. Isso evitará que você seconfunda ao escrever os nomes dos seus arquivos umas vezes com .html e outras com .htm. E sevocê trabalha com uma equipe em um projeto, é ainda mais importante que todos estejam deacordo com a mesma extensão.


Sintaxes do HTML

O HTML é uma linguagem que baseia sua sintaxe em um elemento de base que chamamosetiqueta (tag). A etiqueta apresenta frequentemente duas partes:

Uma abertura de forma geral <etiqueta> Um fechamento do tipo </etiqueta>

Tudo que estiver incluído no interior desta etiqueta sofrerá as modificações que caracterizam aesta etiqueta. Como por exemplo:

As etiquetas <b> e </b> definem um texto em negrito. Se em nosso documento HTMLescrevemos uma frase com o seguinte código:

<b>Isto está em negrito</b>

O resultado será:

Isto está em negrito

As etiquetas <p> e </p> definem um parágrafo. Se em nosso documento HTML escrevêssemos:<p>Olá, estamos no parágrafo 1</p> <p>Agora mudamos de parágrafo</p>

O resultado seria:

Olá, estamos no parágrafo 1

Agora mudamos de parágrafo

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 cabeçalho, delimitado por <head> e </head> onde colocaremos etiquetas de índole informativocomo por exemplo o título de nossa página.

O corpo, delimitado pelas etiquetas <body> e </body>, que será onde colocaremos nosso texto eimagens delimitados por sua vez por outras etiquetas como as que vimos anteriormente.

O resultado é um documento com a seguinte estrutura:

<html>

<head>

Etiquetas e conteúdos do cabeçalho

Dados que não aparecem em nossa página mas que são importantes para catalogá-la: Título,palavras-chaves, etc

</head>

<body>

Etiquetas e conteúdo do corpo

Parte do documento que será mostrada pelo navegador: Textos e imagens

</body>

</html>

As maiúsculas ou minúsculas são indiferentes ao escrever as etiquetas

As etiquetas podem ser escritas com qualquer tipo de combinação entre maiúsculas e minúsculas.Ou seja, <HTML> ou <HtMl> são a mesma etiqueta. Entretanto, é aconselhável acostumar-se aescrevê-las em minúscula já que outras tecnologias que podem conviver com nosso HTML (XMLpor exemplo) não são tão permissivas e nunca está mal ter bons costumes desde o princípio paraevitar falhos triviais no futuro.


Sua primeira página

Podemos já com estes conhecimentos, e mais algum outro, criar nossa primeira página. Para isso,abra seu editor de textos e, copie e cole o seguinte texto em um novo documento:

<html>

<head> <title>Cozinha Para Todos</title> </head>

<body> <p><b>Bem-vindo,</b></p> <p>Você está na página<b>Comida para todos</b>.</p> <p>Aqui você aprenderá receitas fáceis e deliciosas.</p> </body>

</html>

Agora salve este arquivo com extensão .html ou .htm em seu disco rígido. Para isso, acessamosno menu "Arquivo" e selecionamos a opção "Salvar como". Na janela escolhemos o diretório ondedesejamos salvá-lo e colocaremos um nome para ele, como por exemplo: minha_página.html.

Conselho: Utilize nomes em seus arquivos que tenham algumas normas básicas parapoupar alguma confusão ou desgosto. Nosso conselho é que não utilize acentos, nem espaços, nem outros caracteres raros.Também lhe ajudará escrever sempre as letras em minúsculas. Isto não quer dizer que se deve fazer nomes de arquivos curtos, é melhor fazê-losdescritivos para que se possa lembrar o que há dentro. Algum caractere como o traço "-"ou o traço baixo "_" lhe pode ajudar a separar as palavras. Por exemplo:quem_somos.html

Com o documento HTML criado, podemos ver o resultado obtido através de um navegador.Chegado a este ponto, é conveniente, insistir no fato de que nem todos os navegadores sãoidênticos. Infelizmente, os resultados de nosso código podem mudar de um para outro, sendo porisso aconselhável visualizar a página em vários navegadores. Geralmente usam-se InternetExplorer e Netscape como referências já que são os mais extensos.

Na verdade, no momento em que estas linhas são escritas, o Internet Explorer monopoliza amaioria imensa de usuários (mais ou menos 90%) e o Netscape está relegado a um segundoplano. Isto não quer dizer que devemos deixá-lo de lado já que o 10% de visitas que este pode

nos proporcionar, pode resultar muito importante para nós. Por outro lado, parece que já setornou pública a intenção do Netscape de desviar um pouco seus negócios para outros rumos eabandonar esta chamada "luta de navegadores" na qual estava recebendo a pior parte.

Então, voltando ao tema, uma vez criado o arquivo .html ou .htm, podemos visualizar o resultadode nosso trabalho abrindo a página criada com um navegador. Para isso, dependendo donavegador 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 botão "Examinar" e acessamos uma janela a partirda qual poderemos nos mover pelo interior do nosso disco rígido até encontrar o arquivo quedesejamos abrir.

A coisa não é mais difícil com o Netscape. Neste caso, temos de ir também à barra de menuprincipal e selecionarmos File e logo, Open File. A mesma janela de busca nos permitirá examinar oconteúdo de nosso PC até dar com o arquivo procurado.

Nota: Também se pode abrir o arquivo acessando o diretório onde ele está salvo. Nelese pode encontrar seu arquivo HTML e ver que possui como ícone o logotipo de Netscapeou o do Internet Explorer. Para abrí-lo simplesmente fazemos um clique duplo sobre ele.

Uma vez aberto o arquivo, já poderá ver sua primeira página web. Algo simples mas que já é umcomeço. 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 presença dotexto delimitado pela etiqueta <title>. Esta é uma das funções desta etiqueta, cujo principalincubência é o de servir de referência nos motores de busca como Altavista ou Yahoo.

Por outro lado, os elementos que colocamos entre a etiqueta <body> e </body> se podem ver noespaço reservado para o corpo da página.

Podemos ver a página do exemplo em funcionamento aqui.

Se agora dermos um clique no botão direito do mouse sobre a página e selecionarmos "Ver códigofonte" (ou View page source), veremos como que numa janela acessória aparece o código denossa página. Este recurso é de extrema importância já que nos permite ver o tipo de técnicasempregadas por outros para a confecção de suas páginas.

Com tudo isso assimilado já estamos em condições de aprofundarmos um pouco mais na descriçãode algumas das etiquetas mais usadas do HTML.

Possível problema: Ao utilizar o Bloco de Notas no Windows em algumas ocasiões,mesmo lhe dizendo que é um arquivo .html, o documento se salva como se fosse um

q q ,texto e não uma página web. O que está acontecendo é que o Bloco de Notas tem pré-determinado salvar seus arquivos com extensão .txt e por isso, na realidade o que eleestá salvando no disco rígido é minha_pagina.html.txt. Para conseguir ter o controle das extensões no Bloco de Notas e no Windows em geralpodemos acessar ao "Meu computador" e no menu de "Ver", selecionar "Opções depasta". Na janela que aparece clicamos na opção "Ver" e nos permite desabilitar umacaixa de seleção que põe como "Ocultar extensões para os tipo de arquivos conhecidos".(assim se faz no Win98, mas pode variar um pouco em outras versões do Windows) Com isso conseguiremos ver sempre a extensão do arquivo com o qual estamostrabalhando e fazer com que o Bloco de Notas atenda o que estamos lhe solicitandoquando gravamos com outra extensão que não seja .txt.


Formato de parágrafos em HTML

Nos capítulos anteriores apresentamos a título de exemplo, algumas etiquetas que permitem darformato ao nosso texto. Neste capítulo veremos com mais detalhe, as etiquetas mais amplamenteutilizadas e exemplificaremos algumas delas posteriormente.

Formatar um texto passa por tarefas tão evidentes como definir os parágrafos, justificá-los,introduzir marcadores, numerações, ou pôr em negrito, itálico, etc.

Vimos que para definir os parágrafos utilizamos a etiqueta <p> que introduz um salto e deixa umalinha em branco antes de continuar com o resto do documento.

Podemos também utilizar a etiqueta <br>, da qual não existe seu fechamento correspondente(</br>), para realizar um simples enter, com o que não deixamos uma linha em branco, e sim,somente mudamos de linha.

Nota: Existem outras etiquetas que não têm seu correspondente de fechamento, como<img> para as imagens, que veremos mais adiante. Isto ocorre porque um salto de linhaou uma imagem não começam e acabam mais adiante, simplesmente só têm presençaem um lugar pontual.

Podemos comprovar que mudar de linha em nosso documento HTML sem introduzir algumas dessasou de outras etiquetas não implica em absoluto uma mudança de linha na página visualizada.

Na realidade o navegador introduzirá o texto e não mudará de linha a não ser que esta chegue aseu fim ou se o especifiquemos com a etiqueta correspondente.

Os parágrafos delimitados por etiquetas <p> podem ser facilmente justificados à esquerda, aocentro ou à direita, especificando tal justificação no interior da etiqueta por meio de um atributoalign. Um atributo não é mais do que um parâmetro incluído no interior da etiqueta que ajuda adefinir o funcionamento da etiqueta de uma forma mais pessoal. Veremos ao longo deste manualuma quantidade de atributos muito úteis para todo tipo de etiquetas.

Então, se desejássemos introduzir um texto alinhado à esquerda escreveríamos:

<p align="left">Texto alinhado à esquerda</p>

O resultado seria:

Texto alinhado à esquerda

Para uma justificação 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 são escritos entreaspas. Em algumas ocasiões necessitamos especificar alguns atributos para o funcionamentocorreto da etiqueta. Em outros casos, o próprio navegador toma um valor definido por padrão.Para o caso de align, o valor padrão é left.

Nota: Os atributos têm seus valores indicados entre aspas ("), mas se não os indicamosentre aspas, também funcionará na maioria dos casos. Entretanto, é aconselhável queponhamos sempre as aspas para acostumarmos a utilizá-las, por dar homogeneidade aosnossos códigos e para evitar erros futuros em sistemas mais meticulosos.

O atributo align não é exclusivo da etiqueta <p>. Outras etiquetas muitos comuns, que veremosmais adiante, entre as quais se introduzem texto ou imagens, costumam fazer uso deste atributode forma habitual.

Imaginemos um texto relativamente longo onde todos os parágrafos estão alinhados à esquerda(por exemplo). Uma forma de simplificar nosso código e de evitar introduzir continuamente oatributo align sobre cada uma de nossas etiquetas é utilizando a etiqueta <div>.

Esta etiqueta por si só não serve para nada. Tem que estar acompanhada do atributo align e oque nos permite é alinhar qualquer elemento (parágrafo ou imagem) da maneira que nósdesejarmos.

Assim, o código: <p align="left">paragrafo1</p> <p align="left">parágrafo2</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 divisões nas quais definimos um mesmo tipo de alinhado.

Exemplo prático:

Para praticar um pouco o que acabamos de ver, vamos propor um exercício que se pode resolverno seu computador. Simplesmente queremos construir uma página que tenha, por esta ordem:

2 parágrafos centralizados 3 parágrafos à direita Um salto triplo de linha 1 parágrafo alinhado à esquerda

Não vamos escrever nesta ocasião o código fonte do exercício. Podemos vê-lo em funcionamentoem nosso navegador e na janela podemos obter o código fonte selecionando no menu Exibir aopção Código fonte.

Cabeçalhos

Existem outras etiquetas para definir parágrafos especiais, formatados como títulos. São oscabeçalhos ou Header em inglês. Como dissemos, são etiquetas que formatam o texto como umtítulo, para o qual atribuem um tamanho maior de letra e colocam o texto em negrito.

Existem vários tipos de cabeçalhos que se diferenciam no tamanho da letra que utilizam. Aetiqueta em concreto é a <h1>, para os cabeçalhos maiores, <h2> para os de segundo nível eassim, até <h6> que é o cabeçalho menor.

Os cabeçalhos implicam também uma separação em parágrafos, portanto, tudo o que for escritodentro de <h1> e </h1> (ou qualquer outro cabeçalho) será colocado em um parágrafoindependente.

Podemos ver como se apresentam alguns cabeçalhos a seguir:

<h1>Cabeçalho de nível 1</h1>

Será visto dessa maneira na página:

Cabeçalho de nível 1

Os cabeçalhos, como outras etiquetas de html, suportam o atributo align. Vejamos um exemplo decabeçalho de nível 2 alinhado ao centro:

<h2 align="center">Cabeçalho de nível 2</h2>

Será visto dessa maneira na página:

Cabeçalho de nível 2

Outro exercício interessante é construir uma página web que contenha todos os cabeçalhospossíveis. Pode-se ver a seguir:

<html> <head> <title>Todos os cabeçalhos</title> </head>

<body>

<h1>Cabeçalho de nível 1</h1> <h2>Cabeçalho de nível 2</h2> <h3>Cabeçalho de nível 3</h3> <h4>Cabeçalho de nível 4</h4>

<h5>Cabeçalho de nível 5</h5> <h6>Cabeçalho de nível 6</h6>

</body>

</html>

Pode-se ver o exercício em uma página a parte.

Conselho: Não devemos utilizar as etiquetas do cabeçalho para formatar o texto, ouseja, se queremos colocar um tipo de letra maior e em negrito, devemos utilizar asetiquetas que existem para isso (que veremos em seguida). Os cabeçalhos são paracolocar títulos em páginas web e é o navegador o responsável de formatar o texto demaneira que pareça um título. Cada navegador então, pode formatar o texto ao seugosto contanto que pareça um título.


Formatando o texto

Além de tudo relativo à organização dos parágrafos, um dos aspectos primordiais da formataçãode um texto, é o da própria letra. É muito comum e prático, apresentar o texto ressaltado emnegrito, itálico e outros. Paralelamente, o uso de índices e subíndices é vital para a publicação detextos científicos. Tudo isso e muito mais, é possível por meio do HTML a partir de uma série deetiquetas entre as quais vamos destacar algumas.

Negrito

Podemos escrever o texto em negrito o incluindo dentro das etiquetas <b> e </b> (bold). Estamesma tarefa é desempenhada por <strong> e </strong> sendo ambas equivalentes. Nós nosinclinamos pelas primeiras por uma simples razão de esforço.

Escrevendo um código deste tipo:

<b>Texto em negrito</b>

Obteremos este resultado: Texto em negrito

Nota: Qual a diferença entre <b> e <strong>? Apesar das duas etiquetas fazerem omesmo efeito, há uma peculiaridade que as fazem distintas. A etiqueta <b> indicanegrito, enquanto que a etiqueta <strong> indica que se deve escrever ressaltado. Osnavegadores interpretam o HTML segundo seu critério, é por isso que se podem ver aspáginas de distintas maneiras em uns browsers e outros. A etiqueta <h1> quer dizer"cabeçalho de nível 1", o navegador é o responsável de formatar o texto de maneira quepareça um cabeçalho de primeiro nível. Na prática, os cabeçalhos do Internet Explorer edo Netscape são muito parecidos (tamanho de letra grande e em negrito), mas outronavegador poderia colocar os cabeçalhos sublinhados se lhe parecesse oportuno.

Itálico

Também neste caso existem duas possibilidades, uma curta: <i> e </i> (italic) e outra um poucomais longa: <em> e </em>. Neste manual, e na maioria das páginas que se vê por aí, é normalencontrar com a primeira forma que é sem dúvida mais simples para escrever e para se lembrar.

Abaixo, um exemplo de texto em itálico:

<i>Texto em itálico</i>

Que dá o seguinte efeito:

Que dá o seguinte efeito:

Texto em itálico

Sublinhado

O HTML nos propõe também para o sublinhado as etiquetas: <u> e </u> (underline). Entretanto ouso do sublinhado deve ser usado com muita precaução visto que os links hipertextos vão, a nãoser que se indique o contrário, sublinhados com o que podemos confundir o leitor e afastá-lo doverdadeiro interesse de nosso texto.

Subscrito e sobrescrito

Este tipo de formato é de extrema utilidade para textos científicos. As etiquetas empregadas são:

<sup> e </sup> para os sobrescritos <sub> e </sub> para os subscritos

Temos aqui um exemplo:

A <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>CINOS é 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 sercombinadas estando umas dentro das outras de forma que conseguimos resultados diferentes.Assim, podemos sem nenhum problema criar um texto em negrito e em itálico colocando umaetiqueta dentro da outra:

<b>Isto só está em negrito<i>e isto em negrito e itálico</i></b>

Isto daria:

Isto só está em negrito e isto em negrito e itálico

Conselho: Para unir etiquetas HTML, faça corretamente. Referimo-nos a que se vocêabre uma etiqueta dentro de outra mais principal, antes de fechar a etiqueta principalfeche as etiquetas que você tiver aberto dentro dela.

Devemos evitar códigos como o seguinte:<b>Isto está em negrito e <i>itálico</b></i>

A favor de códigos com etiquetas corretamente colocadas:<b>Isto está em negrito e<i>itálico</i></b>

Isto é muito aconselhável, ainda que os navegadores entendam bem as etiquetas malcolocadas, por duas razões:

1. Sistemas como XML não são tão permissivos com estes erros e pode que no futuronossas páginas não funcionem corretamente.2. Leva muito tempo de processamento para os navegadores resolverem este tipo deerro, inclusive mais do que construir a própria página, por isso devemos evitar-lhes quesofram por uma má codificação.


Cor, tamanho e tipo de letra

Cor, tamanho e tipo de letra

Apesar de que por razões de homogeneidade e simplicidade de código estes tipos de formatos sãocontrolados atualmente por folhas de estilo cascata (das quais já teremos tempo de falar), existeuma forma clássica 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 etiquetadevemos especificar os atributos correspondentes a cada um destes parâmetros que desejamosdefinir. A seguir comentamos os atributos principais desta etiqueta:

Atributo face

Define o tipo de letra. Este atributo é interpretado por versões do Netscape a partir da 3 e deMSIE 3 ou superiores. Outros navegadores as ignoram completamente e mostram o texto com afonte que utilizam.

Deve-se ter cuidado com este atributo já que cada usuário, dependendo da plataforma queutilize, pode não dispor dos mesmos tipos de letra que nós com o que, se nós escolhemos um tipodo que não dispõe, o navegador se verá forçado a mostrar o texto com a fonte que utiliza porpadrão (que costuma ser Times New Roman). Para evitar isso, dentro do atributo costuma-seselecionar vários tipos de letras separados por vírgulas. Neste caso, o navegador comprovará quedispõe do primeiro tipo numerado e se não for assim, passará para o segundo e assimsucessivamente até encontrar um tipo que possua ou então, até acabar a lista e colocar a fontepadrão. Vejamos um exemplo:

<font face="Comic SansMS,arial,verdana">Este texto tem outra tipografia</font>

Que se visualizaria assim em uma página web:

Este texto tem outra tipografia

Nota: Aqui temos um exemplo de atributo cujo valor deve estar limitado entre aspas (").Havíamos dito que as aspas eram opcionais nos atributos, entretanto isto não é assimsempre. Se o valor do atributo contém espaços, como é o caso de:

face="Comic Sans MS,arial,verdana"

devemos colocar as aspas para limitá-lo. Em caso de não ter aspas

face=Comic Sans MS,arial, verdana

se entenderia que face=Comic, mas não se levaria em conta tudo o que segue, porque oHTML não o associaria ao valor atributo. Neste caso o HTML pensaria que as seguintespalavras (depois do espaço) são outros atributos, mas como não os conhece comoatributos simplesmente iria ignorá-los.

Atributo size

Define o tamanho da letra. Este tamanho pode ser absoluto ou relativo.

Se falarmos em términos absolutos, existem 7 níveis de tamanhos distintos numerados de 1 a 7por 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>


Este texto é maior

Podemos também modificar o tamanho de nossa letra em relação ao do texto mostradoanteriormente definindo o número de níveis que queremos subir ou descer nesta escala detamanhos 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 oque queremos dizer é que aumentamos um nível o tamanho da letra. Se estávamos escrevendopreviamente em 3, passaremos automaticamente a 4.

Os tamanhos reais que vermos na tela dependerão da definição e do tamanho da fonte escolhidopelo usuário no navegador. Este tamanho de fonte pode ser definido no Explorer indo ao menusuperior, Exibir/Tamanho da fonte. No Netscape escolheremos View/Text Size. Esta flexibilidadepode acabar sendo embaraçosa para nós em mais de uma ocasião, já que em muitos casosdesejaremos que o tamanho do texto permaneça constante para que este caiba em umdeterminado espaço. Veremos em seu momento que esta pré-fixação do tamanho pode serrealizada pelas folhas de estilo em cascata.

Atributo cor

A cor do texto pode ser definida através do atributo cor. Cada cor é por sua vez definida por umnúmero hexadecimal que está composto por três partes. Cada uma destas partes representa acontribuição do vermelho, verde e azul à cor em questão.

Por outro lado é possível definir de uma maneira imediata algumas das cores mais freqüentementeusadas para as que se criaram um nome mais memotécnico:

Nombre ColorAqua

Black

BlueFuchsia

Gray

GreenLime

Maroon

NavyOlive

Purple

RedSilver

Teal

WhiteYellow

<font color="red">Este texto está em vermelho</font>


Este texto está em vermelho

Com tudo isso, já somos capazes de criar um texto formatado de uma forma realmente elaborada.

Colocamos então em prática tudo o que aprendemos nestes capítulos fazendo um exercícioconsistente em uma página que tenha as seguintes características:

Um título com cabeçalho de nível 1, em itálico e na cor verde oliva.Um segundo título com cabeçalho de nível 2, também na cor verde oliva.Todo texto da página deverá apresentar-se com uma fonte diferente da fonte padrão. Por

l "C i S MS" d ã j i l

exemplo, "Comic Sans MS" e no caso de que esta não esteja no sistema, que se coloque afonte "Arial".

Pode-se ver uma possível solução do exercício neste link.


Atributos para páginas

As páginas HTML podem ser construídas com uma variedade de atributos que lhe podem dar umaspecto à página muito personalizado. Podemos definir atributos como a cor de fundo, a cor dotexto ou dos links. Estes atributos se definem na etiqueta <body> e, como dizíamos são gerais atoda a página.

O melhor para explicar seu funcionamento é vê-los um a um.

Atributos para fundos

Bgcolor: especificamos uma cor de fundo para a página. No capítulo anterior aprendemos aconstruir qualquer cor, com seu nome ou seu valor RGB. A cor de fundo que podemos atribuir combgcolor é uma cor plana, ou seja, a mesma para toda a superfície do navegador.

Background: serve para indicar a colocação de uma imagem como fundo da página. Noscapítulos mais adiante, veremos como se inserem imagens com HTML e os tipos de imagens quese podem utilizar.

Exemplo de fundo

Vamos colocar esta imagem no fundo da página.

A imagem chama-se fundo.jpg e supomos que se encontra no mesmo diretório que a página.Neste caso se colocaria a seguinte etiqueta <body>

<body background="fondo.jpg">

Pode-se ver o efeito de colocar este fundo em uma página a parte.

Conselho: Sempre que colocarmos uma imagem de fundo, devemos também pôr uma cor de fundopróxima da cor da imagem.

Isto se deve, pois ao colocar uma imagem de fundo, temos que colocar uma cor que contrastesuficientemente com tal fundo. Se o visitante não pode ver o fundo por qualquer questão (porexemplo, por ter a carga de imagens desabilitada) pode que o texto não contraste o suficiente coma cor de fundo padrão da web.

Acredito que o melhor a fazer é testar com um exemplo. Se a imagem de fundo é escura, teremosque colocar um texto claro para que se possa ler. Se o visitante que acessa a página não vê aimagem de fundo, sairá o fundo padrão, que geralmente é branco, de modo que ao ter um texto decor clara sobre um fundo branco, não será possível ler o texto convenientemente.

Ocorre parecido quando se está fazendo o download da página. Se ainda não chegou ao nossosistema 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 odownload da imagem de fundo.

C d t t

Cor do texto

Text: Este atributo serve para atribuir a cor do texto da página. Por padrão é o negro.

Ademais da cor do texto, temos três atributos para atribuir a cor dos links da página. Já devemossaber que os links devem diferenciar-se do resto do texto da página para que os usuários possamidentificá-los facilmente. Para isso, eles costumam aparecer sublinhados e com uma cor mais vivaque o texto. Os três atributos são os seguintes:

Link: a cor dos links que não foram visitados.

Vlink: a cor dos links visitados. A letra "v" vem justamente da palavra visitado. É a cor que terãoos links que já visitamos. Por padrão sua cor é roxa. Esta cor deverá ser um pouco menos vivaque a cor dos links normais.

Alink: é a cor dos links ativos. Um link está ativo no preciso momento em que se clica. Às vezesé difícil perceber quando um link está ativo porque no momento em que se ativa, é porque oestamos clicando e nesse caso, o navegador abandonará a página rapidamente e não poderemosver o link ativo mais que um mínimo instante.

Exemplo de cor de texto

Vamos ver uma página em que a cor de fundo seja preta, e as cores dos textos e dos links sejamclaros. Colocaremos a cor do texto branca e os links amarelos, mais ressaltados os que nãotenham sido visitados e menos ressaltados os que já tenham sido. Para isso, escreveríamos aetiqueta body assim:

<body bgcolor="#000000" text="#ffffff" link="#ffff33" alink="ffffcc" vlink="ffff00">

O efeito pode-se ver em uma página a parte.

Margens

Com outros atributos da etiqueta <body> podem-se atribuir espaços de margens nas páginas, oque é muito útil para eliminar as margens em branco que aparecem nos lados, em cima e embaixoda página. Estes atributos são diferentes para o Internet Explorer e para o Netscape Navigator,por isso, devemos utilizá-los todos se queremos que todos os navegadores os interpretemperfeitamente.

Leftmargin: para a indicar a margem nos lados da página. Válido para Internet Explorer.

Topmargin: para indicar a margem acima e abaixo da página. 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 página sem margem é a própria página de criarweb.com que você está visitandoatualmente. (pelo menos na hora de escrever este artigo). Além disso, vamos ver outra páginasem margens, caso alguém 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 página tem o fundo branco e dentro um painel com o fundo vermelho. Na página poderemosver que o painel ocupa o espaço na página sem deixar lugar para nenhum tipo de margem. Pode-se ver o exemplo em uma página à parte.


Listas I

São realmente notáveis as possibilidades que o HTML nos oferece em questão de tratamento detexto. Não se limitam ao que vimos até agora, pois vão ainda mais longe. Vários exemplos dissosão as listas, que servem para numerar e definir elementos, os textos pré-formatados e oscabeçalhos ou os títulos.

As listas são utilizadas para citar, numerar e definir objetos. Também são utilizadascorrentemente para deslocar o começo da linha para a direita.

Podemos distinguir três tipos de listas:

Listas desordenadasListas ordenadasListas de definição

Veremos agora detalhadamente uma por uma:

Listas desordenadas

São 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 inconvenienteem colocá-lo). Então, fica assim:

<p>Países do mundo</p> <ul> <li>Brasil</li> <li>Espanha</li> <li>Austrália</li> </ul>

O resultado:

Países do mundo

BrasilEspanhaAustrália

Podemos definir o tipo de marcador empregado para cada elemento. Para isso devemosespecificá-lo por meio do atributo type incluído dentro da etiqueta de abertura <ul>, se queremosque o estilo seja válido para toda a lista, ou dentro da etiqueta <li> se queremos especificar umsó 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 não funciona a opção de mudar o tipo de marcador e por mais quenos empenhemos, sempre sairá a bolinha preta.

Em caso de que não funcione, sempre podemos construir a lista à mão com o marcador quequisermos, utilizando as tabelas do HTML. Veremos mais adiante como trabalhar com tabelas.

Vamos ver um exemplo de lista com um quadrado ao invés de uma bolinha e, no último elemento,colocaremos um círculo. Para isso, vamos colocar o atributo type na etiqueta <ul>, que irá afetartodos 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 1Elemento 2Elemento 3Elemento 4


Listas II

Continuamos estudando as listas do HTML, que nos possibilita criar estruturas atrativas paraapresentar a informação.

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 razão</li> <li>Em caso de dúvida, aplicar a regra 1</li> </ol>

O resultado é:

Regras de comportamento no trabalho

1. O chefe sempre tem a razão2. Em caso de dúvida aplicar a regra 1

Do mesmo modo das listas desordenadas, as listas ordenadas oferecem a possibilidade demodificar o estilo. Concretamente, nos é possível especificar o tipo de numeração empregadoescolhendo entre números (1,2,3...), letras (a,b,c...) e suas maiúsculas (A,B,C...) e númerosromanos em suas versões maiúsculas (I,II,III...) e minúsculas (i,ii,iii...).

Para realizar tal seleção 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 são:

1 Para ordenar por números a Por letras do alfabeto A P l t iú l d lf b t

A Por letras maiúsculas do alfabeto i Ordenação por números romanos em minúsculas I Ordenação por números romanos em maiúsculas

Nota: Lembramos que em alguns navegadores não funciona a opção de mudar o tipo de marcador.

Pode ser que em algum caso desejemos começar nossa numeração por um número ou letra quenão tem porque ser necessariamente o primeiro de todos. Para resolver esta situação, podemosutilizar um segundo atributo, start, que terá um número como valor. Este número, que por padrãoé 1, corresponde ao valor a partir do qual começamos a definir nossa lista. Para o caso das letrasou dos números romanos, o navegador se encarrega de fazer a tradução do número à letracorrespondente.

Propomos um exemplo usando este tipo de atributos:

<p>Ordenamos por números</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 números romanos começando pelo 10</p> <ol type="i" start="10"> <li> Elemento x</li>

<li> Elemento xi</li>

</ol>

O resultado:

Ordenamos por números

1. Elemento 12. Elemento 2

Ordenamos por letras

a. Elemento ab. Elemento b

Ordenamos por números romanos começando pelo 10

x. Elemento xxi. Elemento xi


Listas III

Terminamos o assunto das listas estudando as listas de definição. Veremos também a combinaçãode listas.

Listas de definição

Cada elemento é apresentado junto com sua definição. A definição principal é <dl> e </dl>(definition list). As etiquetas do elemento e sua definição são <dt> (difinition term) e <dd>(definition definition) respectivamente.

Aqui lhe propomos um código que poderá clarear este sistema:

<p>Dicionário da Língua Portuguesa</p> <dl> <dt>Açougue</dt> <dd>Estabelecimento onde se vendem carnes frescas</dd> <dt>Colheita</dt> <dd>Ato de colher os produtos agrícolas</dd> </dl>

O efeito produzido:

Dicionário da Língua Portuguesa

AçougueEstabelecimento onde se vendem carnes frescas

ColheitaAto de colher os produtos agrícolas

Observe que em cada linha <dd> está deslocada da direção da esquerda. Este tipo de etiquetas éusado muitas vezes com o propósito de criar textos mais ou menos deslocados da direção daesquerda.

O código:

<dl> <dd>Primeiro nível de deslocamento <dl> <dd>Segundo nível de deslocamento <dl> <dd>Terceiro nível de deslocamento </dl> </dl> </dl>

O resultado:

Primeiro nível de deslocamento

Segundo nível de deslocamento

Terceiro nível de deslocamento

Combinando listas

Nada nos impede de utilizar todas estas etiquetas de forma combinada como vimos em outroscasos. Dessa forma, podemos conseguir listas mistas como, por exemplo:

<p>Cidades 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

Brasil1. Rio de Janeiro2. Salvador

Espanha1. Madrid2. Barcelona


Caracteres especiais

Uma página web é vista por diferentes países, que usam conjuntos de caracteres distintos. Alinguagem HTML nos oferece um mecanismo pelo qual podemos estar seguros que uma série decaracteres raros serão bem vistos em todos os computadores do mundo, independentemente deseu jogo de caracteres.

Estes conjuntos são os caracteres especiais. Quando queremos pôr um desses caracteres numapágina, devemos substituí-lo por seu código.

Por exemplo, a letra "á" (a minúscula acentuada) se escreve: "á" de modo que a palavra páginaseria escrita numa página HTML desse modo: p&aamp;aacute;gina .

Caracteres especiais básicos

Na realidade estes caracteres se usam em HTML para não confundir um início 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 página web é um arquivo HTML no qual podemos incluir, entre outrascoisas, 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 páginas HTMLe imagens, que constituem o conteúdo ao qual o navegante tem acesso.

Entretanto, não poderíamos falar de navegante ou de navegação se estes arquivos HTML nãoestivessem devidamente conectados entre eles e com o exterior de nosso site por meio de linkshipertexto. Na verdade, o atrativo original do HTML reside no possível empenho dos conteúdosdos arquivos introduzindo referências sob a forma de links que permitem um acesso rápido àinformação desejada. Serviria pouco se tivéssemos na rede páginas isoladas as quais as pessoasnão pudessem acessar ou páginas onde não fosse possível ir para outras.

Um link pode ser facilmente detectado em uma página. Basta deslizar o cursor do mouse sobre asimagens ou o texto e ver como muda de sua forma original transformando-se por regra geral emuma mão com um dedo indicador. Adicionalmente, estes links costumam ir, no caso dos textos,coloridos e sublinhados para que o usuário não tenha dificuldade em os reconhecer. Se nãoespecificamos o contrário (já teremos a ocasião de explicar como), estes links-texto estarãosublinhados e coloridos de azul. No caso das imagens que servem de link, veremos que estãodelimitadas por uma marcação azul por padrão.

Para colocar um link, utilizaremos as etiquetas <a> e </a>. Dentro da etiqueta de aberturadevemos especificar o destino do link. Este destino será introduzido sob a forma de atributo, noqual leva o nome href.

A sintaxe geral de um link é portanto da seguinte forma:

<a href="destino">conteúdo</a>

Sendo o conteúdo um texto ou uma imagem. É a parte da página que se colocará ativa e ondedeveremos clicar para acessar ao link.

E o destino por sua vez, será uma página, um correio eletrônico ou um arquivo.

Em função do destino, os links são classicamente agrupados da seguinte forma:

Links internos: os que se dirigem a outras partes dentro da mesma página.Links locais: os que se dirigem a outras páginas do mesmo site web.Links remotos: os que se dirigem à páginas de outros sites web.Links com endereços de correio: para criar uma mensagem de correio dirigido a umendereço.Links com arquivos: Para que os usuários possam fazer download de arquivos.


Links internos

São os links q e apontam a m l ga dife ente dent o da mesma página Este tipo de link é

São os links que apontam a um lugar diferente dentro da mesma página. Este tipo de link é

essencialmente utilizado em páginas onde o acesso aos conteúdos pode ser prejudicado devidoao grande tamanho da mesma. Mediante estes links, podemos oferecer aos visitantes apossibilidade de acessar rapidamente ao início e ao final da página, ou também a diferentesparágrafos ou seções.

Para criar um link deste tipo é necessário, além do link origem propriamente dito, um segundo linkque será colocado no destino. Vejamos mais claramente como funcionam estes links com umsimples exemplo:

Suponhamos que queremos criar um link que aponte ao final da página. 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 conteúdo do link é o texto "Ir abaixo" e o destino, abaixo, é um ponto damesma página que ainda não foi definido. Atenção ao símbolo # ; é ele quem especifica aonavegador que o link aponta a uma seção particular.

Em segundo lugar, temos que gerar um link no destino. Este link levará o nome "abaixo" parapoder distinguí-lo dos outros possíveis links realizados dentro da mesma página. Neste caso, aetiqueta que escreveremos será esta:

<a name="abaixo"></a>

Na verdade, estes links, mesmo sendo úteis, não são os mais utilizados. A tendência geral é a decriar páginas (arquivos) independentes com tamanhos mais reduzidos linkados entre eles por linkslocais (que veremos em seguida). Desta forma, evitamos o excesso de tempo de carregamento deum arquivo e a introdução de excesso de informação que possa desviar a atenção do usuário.

Uma aplicação corrente destes links consiste em colocar um pequeno índice ao princípio de nossodocumento onde introduzimos links origem às diferentes seções. Paralelamente, ao final de cadaseção introduzimos um link que aponta ao índice de forma que possamos guiar o navegante nabusca da informação útil para ele.


Links locais

Como dissemos, um site web está constituido de páginas interconexas. No capítulo anterior vimoscomo linkar diferentes seções dentro de uma mesma página. Resta-nos estudar a maneira derelacionar os distintos documentos HTML que compõem nosso site web.

Para criar este tipo de links, temos que criar uma etiqueta da seguinte forma:

<a href="arquivo.html">conteúdo</a>

Por regra geral, para uma melhor organização, os sites costumam estar ordenados por diretórios.Estes diretórios costumam conter diferentes seções da página, imagens, audios...É por isso queem muitos casos não nos será válido especificar o nome do arquivo, e sim, o diretório onde nossoarquivo.html está alojado.

Se você já tiver trabalhado com MS-DOS não terá nenhum problema para compreender o modo defuncionamento. Somente deverá ter cuidado em usar a barra "/" no lugar da contra-barra "\".

/ g \

Para aqueles que não sabem como mostrar um caminho de um arquivo, aqui vai uma série deindicações que lhes vão ajudar a compreender a forma de expressá-los. Não é nada difícil e comum pouco de prática o fará praticamente sem pensar.

1. Há de situar mentalmente no diretório no qual se encontra a página com o link.2. Se a página destino está em um diretório incluído dentro do diretório no qual nos

encontramos, temos de marcar o caminho numerando cada um dos diretórios pelos quaispassamos até chegar ao arquivo e separando-os pelo símbolo barra "/". No final,obviamente, escrevemos o arquivo.

3. Se a página destino encontra-se em um diretório que inclui o da página com o link, temosque escrever dois pontos seguidos e uma barra "../" tantas vezes quantas forem os níveisque subirmos na hierarquia de diretórios, até chegar no diretório onde está localizado oarquivo destino.

4. Se a página encontra-se em outro diretório não incluído nem incluente do arquivo origem,teremos que subir com a regra 3 por meio de ".." até encontrar o diretório que englobe odiretório que contém a página destino. A seguir faremos como a regra 2. Escreveremostodos os diretórios pelos quais passamos até chegar ao arquivo.

Exemplo:

Para esclarecer este ponto podemos fazer um exemplo a partir da estrutura dediretórios 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 seção concreta, ao invésda página em geral. Este tipo de link costuma ser um híbrido de interno e local. A sintaxe é destetipo:

<a href="arquivo.html#secao">conteudo</a>

Como para os links internos, neste caso temos que marcar a seção com outro link do tipo:

<a name="secao"></a>

Como exemplo temos aqui um link que aponta ao capítulo anterior ao final da página.


Links externos, de correio e para arquivos

Para terminar o tema dos links veremos os três últimos tipos de links que havíamos assinalado.

Links remotos

São os links que se dirigem às páginas que se encontram fora do nosso site web, ou seja,qualquer outro documento que não faz parte de nosso site.

Este tipo de link é muito comum e não representa nenhuma dificuldade. Simplesmente colocamosno at ib to HREF de nossa etiq eta <A> a URL o ende eço da página com a q al q e emos

no atributo HREF de nossa etiqueta <A> a URL ou endereço da página 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 endereços web (URLs) começam por http:// . Isto indicaque o protocolo pelo qual se acessa é HTTP, o utilizado na web. Não devemos nos esquecer decolocá-lo porque senão os links serão tratados como links locais em nosso site.

Outra coisa interessante é que não temos necessariamente que linkar com uma página web com oprotocolo HTTP. Também podemos acessar recursos através de outros protocolos como o FTP.Em tal caso, os endereços dos recursos não começarão com http:// e sim por ftp://.

Links a endereços de correio

Os links a endereços de correio são aqueles em que ao clicá-los nos abre uma nova mensagem decorreio eletrônico dirigido a um determinado endereço de mail. Estes links são muito habituais naspáginas web e é a maneira mais rápida de oferecer ao visitante uma via para o contato com oproprietário da página.

Para colocar um link dirigido a um endereço de correio colocamos mailto: no atributo href do link,seguido do endereço de correio ao qual se deve dirigir o link.

<a href="mailto:[email protected]">[email protected]</a>

Este link pode ser visto aqui: [email protected]

Conselho: Quando você colocar links a endereços de correio, procure indicar no conteúdo do link (oque há entre <A> e </A>) o endereço de correio ao qual se deve escrever. Isto, porque se umusuário não tem configurado um programa de correio em seu computador não poderá enviarmensagens, mas pelo menos poderá copiar o endereço de mail e escrever o correio através deoutro computador ou um sistema web-mail.

Além do endereço do correio eletrônico do destinatário, também podemos colocar no link oassunto da mensagem. Isto se consegue colocando depois do endereço de correio umainterrogação, a palavra subject, o sinal de igual (=) e o assunto em concreto.

<a href="malito:[email protected]?subject=contato através dapágina">[email protected]</a>

Podemos colocar outros atributos de mensagem com uma sintaxe parecida. Neste caso indicamostambém que o correio deve ir com cópia a [email protected].

<a href="mailto:[email protected]?subject=contato através dapágina&[email protected]"> [email protected]</a>

Nota: O visitante da página necessitará ter configurada uma conta de correio eletrônico em seusitema para enviar as mensagens. Logicamente, se não tiver serviço de correio no computador nãoserá possível enviar as mensagens e este sistema de contato com o visitante não funcionará.

Links com arquivos

Este não é um tipo de link propriamente dito, mas o assinalamos aqui porque é um tipo de linkmuito habitual e que apresenta alguma complicação para o usuário novato.

O mecanismo é o mesmo que conhecemos nos links locais e nos remotos, com a únicaparticulariedade de que em vez de estar dirigidos para uma página web, está dirigido para umarquivo de outro tipo.

Se queremos linkar com um arquivo meu_arquivo.zip que se encontra no mesmo diretório que apágina, escreveríamos 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 típica se:"Deseja abrir o arquivo ou salvá-lo no computador?".

Conselho: Não colocar na Internet arquivos executáveis diretamente e sim, arquivos comprimidos.Por duas razões:

1. O arquivo ocupará menos, com o que será mais rápido sua transferência.2. Ao perguntar ao usuário o que deseja fazer com o arquivo, lhe oferece a opção de abrí-lo e

salvá-lo no computador. Nós geramente desejaremos que o usuário salve-o no computador enão o execute até que o tenha em seu disco rígido. Se decido abrí-lo ao invés de salvá-losimplesmente o colocará em funcionamento e quando pare não estará salvo em seu sistema.Se os arquivos estiverem comprimidos obrigaremos ao usuários a descomprimí-los em seudisco rígido antes de colocá-los em funcionamento, com o que nos certificamos que o usuárioo salva em seu computador antes de executá-lo.

Se quisermos linkar outro tipo de arquivos como um PDF ou mundo VRML (Realidade Virtualpara Internet) continuaremos fazendo da mesma maneira. O navegador, se reconhece o tipo dearquivo, é o responsável de abrí-lo utilizando o conectador adequado para isso. Assim, se porexemplo linkamos com um PDF colocará o programa Acrobat Reader em funcionamento paramostrar os conteúdos. Se linkamos com um mundo VRML colocará em funcionamento o plug-inque o usuário 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 dúvida, um dos aspectos mais vistosos e atrativos das páginas web é o grafismo. Aintrodução em nosso texto de imagens pode nos ajudar a explicar mais facilmente nossainformação e dar um ar muito mais estético. Porém, o abuso pode nos conduzir a uma sobrecargaque se traduz em uma distração para o navegante, quem terá mais dificuldade em encontrar ainformação necessária, e um maior tempo para carregar a página o que pode ser de um efeitonefasto se nosso visitante não tem uma boa conexão ou se é um pouco impaciente.

Neste capítulos não explicaremos como criar, nem como tratar as imagens, unicamente diremosque para isso utilizam-se aplicações como Paint Shop Pro, Photoshop ou Corel Draw. Também nãoexplicaremos as particularidades de cada tipo de arquivo GIF ou JPG e a forma de otimizar nossasimagens. A este assunto será dedicado em um futuro capítulo.

As imagens são armazenadas em forma de arquivos, principalmente GIF (para desenhos) ou JPG(para fotos). Estes arquivos podem ser criados por nós mesmos ou podem ser baixadosgratuitamente em sites web especializados.

Sendo assim, nestes primeiros capítulos nos limitaremos a explicar como inserir e alinhardevidamente em nossa página uma imagem já criada.

A etiqueta que utilizaremos para inserir uma imagem é <img> (image). Esta etiqueta não possuiseu fechamento correspondente e nela temos de especificar obrigatoriamente o paradeiro denosso arquivo mediante o atributo src (source).

A sintaxe fica então da seguinte forma:

<img src="caminho para o arquivo">

g p q

Para expressar o caminho, faremos da mesma forma que vimos para os links. As regras continuamsendo as mesmas, o único que muda é que, no lugar de uma página destino, o destino é umarquivo gráfico.

Além deste atributo, obviamente indispensável para a visualização da imagem, a etiqueta <img>nos propõe outra série de atributos de maior ou menor utilidade:

Atributo alt

Entre aspas deste atributo, colocaremos uma brevíssima descrição da imagem. Esta etiqueta nãoé indispensável, mas apresenta várias utilidades.

Primeiramente, durante o processo de carregamento da página, quando a imagem não tiver sidoainda carregada, o navegador mostrará esta descrição, com a qual o navegante poderá ter umaidéia do que se trata neste caso.

Isto não é tão trivial se temos em conta que alguns usuários navegam pela rede com uma opçãodo navegador que desativa a amostra de imagens, com o que tais pessoas poderão sempre saberde que se trata o gráfico e eventualmente mudar o modo com imagens para visualizar.

Além disso, determinadas aplicações para incapacitados ou para telefones vocais que nãomostram imagens oferecem a possibilidade de lê-las, o que nunca é demais pensar nestescoletivos.

Em geral, podemos considerar como aconselhável o uso deste atributo salvo para imagens depouca importância e absolutamente indispensável se a imagem em questão serve de link.

Atributos height e width

Definem a altura e largura respectivamente da imagem em pixels.

Todos os arquivos gráficos possuem umas dimensões de largura e altura. Estas dimensões podemser obtidas a partir do próprio designer gráfico ou também, clicando com o botão direito sobre aimagem vista pelo navegador para logo escolher propriedades sobre o menu que se desdobra.

O fato de explicitar em nosso código as dimensões de nossas imagens ajuda ao navegador aconfeccionar a página da forma que nós desejamos inclusive antes das imagens serem baixadas.

Assim, se as dimensões das imagens tiverem sido proporcionadas, durante o processo decarregamento, o navegador reservará o espaço correspondente a cada imagem criando umaplanificação correta. O usuário poderá começar a ler tranqüilamente o texto sem que este semova de um lado a outro cada vez que se carregue uma imagem.

Além desta utilidade, o alterar os valores destes atributos, é uma forma imediata de redimensionarnossa imagem. Este tipo de utilidade não é aconselhável visto que, se o que pretendemos éaumentar o tamanho, a perda da qualidade da imagem será muito sensível. Inversamente, sedesejamos diminuir seu tamanho, estaremos usando um arquivo maior do que o necessário para aimagem que estamos mostrando, com o que aumentamos o tempo de descarregamento de nossodocumento desnecessariamente.

É importante insistir neste ponto já que muitos estreantes têm o péssimo costume de criargráficos pequenos redimensionando a imagem por meio desses atributos a partir de arquivos detamanho descomunal. Temos que pensar que o tamanho de uma imagem com umas dimensões dametade não 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 quandodesejamos eliminar a borda que aparece quando a imagem serve de link. Em tal caso teremos queespecificar border="0".

Atributos vspace e hspace

Serve para indicar o espaço livre, em pixels, que tem que ser colocado entre a imagem e outroselementos que a rodeiam, como texto, outras imagens, etc.

Atributo lowsrc

Com este atributo podemos indicar um arquivo de baixa resolução. Quando o navegador detectaque a imagem tem este atributo, primeiro descarrega e mostra a imagem de baixa resolução (queocupa muito pouco e que se transfere muito rápido). Posteriormente, descarrega e mostra aimagem de resolução adequada (assinalada com o atributo src, que se supõe que ocupará mais eque será mais lenta de se transferir).

Está atributo está em desuso, mesmo supondo uma vantagem considerável para que odescarregamento inicial se realize mais rápido e que um visitante possa ver uma amostra daimagem 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 doslinks podemos muito facilmente adivinhar o tipo de código necessário.

<a href="arquivo.html"><img src="imagem.gif"></a>

Exemplo prático

Será óbvio para os leitores, fazer agora uma página que contenha uma imagem várias vezesrepetidas, mas com diferentes atributos.

Uma das vezes que saia deve ser mostrada com seu tamanho original e com uma borda de 3pixels.Em outra ocasião a imagem aparecerá sem borda, com sua mesma altura e com uma largurasuperior a original.Também mostraremos a imagem sem borda, com sua mesma largura e com uma alturasuperior a original.Por último, mostraremos a imagem com uma altura e largura maiores que as originais, masproporcionalmente igual que antes.

Vamos utilizar esta imagem para fazer o exercício:

As dimensões originais da imagem são 28x21, o código fonte seria então da seguinte forma:

<img src="img1.gif" width="28" height="21" alt="Tamanho original" border="3"> <br> <br> <img src="img1.gif" width="68" height="21" alt="Achatada" border="0"> <br> <br> <img src="img1.gif" width="28" height="51" alt="Esticada" border="0"> <br> <br> <img src="img1.gif" width="56" height="42" alt="Dobro grande" border="0">

Informe de Miguel Angel Alvarez - Tradução de JML

Informe de Miguel Angel Alvarez Tradução de JMLe-mail: [email protected]

Alinhamento de imagens com HTML

Vimos em seu momento o atributo align que nos permitia alinhar o texto à direita, esquerda ou nocentro de nossa página. Dissemos que este atributo não era exclusivo da etiqueta <p> e sim, quepodia ser encontrado em outro tipo de etiquetas.

Sendo assim, <img> é uma dessas etiquetas que aceitam este atributo, mesmo sendo, nestecaso, 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 destaetiqueta será a imagem no lugar do texto:

Este código 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, autilidade que lhe damos é diferente da anterior.

O fato de utilizar o atributo align dentro da etiqueta <img> nos permite, no caso de dar os valoresleft ou right, justificar a imagem do lado que desejamos uma vez que recheamos com texto o ladooposto. Dessa forma, incorporamos nossas imagens dentro do texto de uma maneira simples.

Aqui se pode ver o tipo de código a criar para obter tal efeito:

<p> <img src="imagem.gif" align="right">Texto tão extenso quanto quisermos para que cubra a parteesquerda da imagem. Continuo colocando texto para que se veja o efeito, Bla bla bla bla bla blabla... </p>

Ficaria assim:

Texto tão extenso quanto quisermos para que cubra a parteesquerda da imagem. Continuo colocando texto para que seveja o efeito, Bla bla bla bla bla bla bla...

<p> <img src="imagen.gif" align="left">Texto tão extenso quantoquisermos para que cubra a parte direita da imagem. Continuo colocando texto para que se veja oefeito, Bla bla bla bla bla bla bla... </p>

Ficaria assim:

Texto tão extenso quanto quisermos para que cubra a partedireita da imagem. Continuo colocando texto para que se veja oefeito, Bla bla bla bla bla bla bla...

Se em algum momento desejarmos preencher esse espaço lateral, podemos passar a uma zonalivre introduzindo uma quebra de linha <br> dentro do qual acrescentaríamos um atributo: clear

Sendo então, 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 tão extensoquanto quisermos quecubra 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 exemploacima, abaixo ou no meio da imagem. Ainda assim, pode que uma mesma linha tenhamos váriasimagens de alturas diferentes que podem ser alinhadas de distintas formas.

Estes valores adicionais são:

Top Ajusta a imagem à parte mais alta da linha. Isto quer dizer que, se existe uma imagem mais alta,ambas imagens apresentarão a borda superior na mesma altura.

Bottom Ajusta o baixo da imagem ao texto.

Absbottom Colocará a borda inferior da imagem ao nível 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 explicações, que podem ser um pouco complicadas, serão mais facilmente assimiladas comum pouco mais de prática.

Falta explicar como introduzir debaixo da imagem um pé de foto ou uma explicação. Para isso,teremos que ver antes de mais nada as tabelas, nos próximos capítulos...

Um logotipo é um exemplo claro deimagem GIF

Parte destaimagem é

transparente


Formatos gráficos para páginas web

O componente gráfico das páginas web tem muita importância, é que o que faz com que estasseja vistosas e o que nos permite aplicar nossa criatividade para fazer o design do site umatarefa agradável. É também uma ferramenta para aproximar os sites ao mundo onde vivemos,entretanto, é também o causador de graves erros nas páginas e fazer destas, em alguns casos,um martírio para o visitante.

As noções básicas para o uso de arquivos gráficos são simples, conhecê-las, mesmo que sejaligeiramente, nos ajudará a criar sites agradáveis e rápidos. Não cometer erros no uso dasimagens é fundamental, mesmo que não 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 gráficos GIF e JPG, pensadosespecialmente para otimizar o tamanho que ocupam em disco, já que os arquivos pequenos setransmitem mais rapidamente pela Rede.

O formato de arquivo GIF se usa para as imagens que tenham desenhos, enquanto que o formatoJPG se usa para as fotografias. Os dois comprimem as imagens para salvá-las. A forma decomprimir a imagem que utiliza cada formato é o que os tornam ideais para um propósito ou outro.

Adicionalmente, pode-se usar um terceiro formato gráfico nas páginas web, o PNG. Este formatonão tem tanta aceitação como o GIF ou o JPG, por várias razões, entre elas: o desconhecimentodo formato por parte dos desenvolvedores, que as ferramentas habituais para tratar gráficos(como por exemplo, Photoshop) geralmente não suportam, e que os navegadores antigos tambémtêm problemas para visualizá-las. Entretanto, o formato se comporta muito bem quanto acompreensão e a qualidade do gráfico conseguinte, pelo que seria útil se chega a extender seuuso.

GIF

Além se ser um arquivo ideal para as imagens que estãodesenhadas, tem muitas outras características que sãoimportantes e úteis.

Compressão: É muito boa para desenhos, como já foi dito.Inclusive pode ser interessante se a imagem é muito pequena,mesmo que seja uma foto.

Transparência: É uma utilidade para definir certas partes do desenho comotransparentes. Desse modo, podemos colocar as imagens sobre distintos fundossem que se veja o quadrado onde está inserido o desenho, vendo em troca asilhueta do desenho em questão. Para criar um gif transparente devemos utilizar umprograma de desenho gráfico, com o qual podemos indicar que cores do desenhoqueremos que sejam transparentes. Geralmente, definimos a transparência quandovamos salvar o gráfico.

Cores: Com este formato gráfico podemos utilizar conjuntos de 256 cores ou menos. Este é umdetalhe muito importante, visto que quanto menos cores utilizarmos na imagem, em geral, menosocupará o arquivo. Às vezes, mesmo utilizando menos cores em um gráfico, este não perde muitaqualidade, chegando a ser inapreciável à vista. Em alguns programas podemos modificar aquantidade de cores ao salvar o arquivo, em outros, fazemos enquanto criamos o gráfico.

Uma fotografia com formato JPG

Uma tentativa detransparência em

JPG.

32 Cores 16 Cores 8 Cores

Imagem tomada com distintas aquarelas de cores. Pode-se apreciar como que com poucas cores se vê bem ográfico e como perde um pouco à medida em que lhe retiramos mais cores.

JPG

Vejamos agora quais são as características fundamentais doformato JPG:

Compressão: Tal como dissemos anteriormente, sua gama decompressão torna ideal este formato para salvar fotografias.Além disso, com JPG podemos definir a qualidade da imagem,com qualidade baixa o arquivo ocupará menos, e vice-versa.

Transparência: Este formato não tem possibilidade de criar áreas transparentes.Se desejamos colocar uma imagem com uma área que pareça transparenteprocederemos assim: com nosso programa de desenho gráfico faremos com que ofundo da imagem seja o mesmo que o da página onde queremos colocá-la. Emmuitos casos, os fundos da imagem e a página parecerão o mesmo.

Cores: JPG trabalha sempre com 16 milhões de cores, ideal para fotografias.

Otimizar arquivos

Para que as imagens ocupem o menos possível e se transfiram rapidamente pela Rede devemosaprender a otimizar os arquivos gráficos. Para isso, devemos fazer o seguinte:

Para os arquivos GIF: Reduziremos o número de cores de nossa aquarela. Isto se faz com nossoeditor gráfico, 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. Esteformato nos permite baixar muito a qualidade da imagem sem que esta perca muito em seuaspecto visual.

Photoshop é uma ferramenta excelentepara otimizar arquivos. Vendo várias

cópias podemos escolher a mais adequada.

JPG qualidade 0 3 KB

JPG qualidade 20 5,9 KB

JPG qualidade 50 10 KB

É imprescindível dispor para otimizar a imagem de uma boaferramenta que nos permita configurar estas característicasda imagem com liberdade e facilidade. Photoshop 5.5 ou 6 éum programa bastante recomendável, pois incorpora umaopção que se chama "Salvar para Web" com a qualpodemos definir as cores do gif, a qualidade do JPG eoutras opções em várias amostras. Assim, com todas asopções configuráveis, vendo os resultados do tamanho doarquivo, podemos otimizar a imagem de uma maneiraprecisa com os resultados que desejamos.

Também existem no mercado outros programas que nospermitem otimizar estas imagens de maneira surpreendente.Uma vez que criamos a imagem, a passamos por estesprogramas e nos comprimem ainda mais o arquivo, fazendo-lhe rápido de transferir e, portanto, mais otimizado para Internet. Ao ser estas utilidades tãoespecializadas, os resultados costumam ser melhores que com os programas de edição gráfica.

Exemplos de otimizadores gráficos: - WebGraphics Optimizer - ProJPG, GIF Imantion E com versões On-line: - GIF Wizard


Tabela de cor

As cores e HTML

As cores possuem um papel muito importante na composição de webs. Sãoindicadas em valores RGB, ou seja, que para conseguir uma cor qualquermisturaremos quantidades de Vermelho, Verde e Azul. Os valores RBG são indicados em numeração hexadecimal, em base 16. (Osdígitos podem crescer até 16). Como não existem tantos dígitos numéricos seutilizam as letras da A à F.

0=0 4=4 8=8 C=121=1 5=5 9=9 D=13

2=2 6=6 A=10 E=14

3=3 7=7 B=11 F=15

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 aoprincípio da expressão.

Outras cores:Laranja #FF8000Verde turquesa #339966Azul escuro #000080

Cores compatíveis em todos os sistemas

Como as páginas web têm que ser vistas por todos os usuários, e os sistemas que utilizampara entrar são distintos, há que utilizar cores compatíveis com a paleta de todos eles. A forma de conseguir isto é limitando nossas cores aos que se podem conseguir utilizando aseguinte norma:

Utilizaremos sempreestes valores:

00336699CCFF

Exemplos: #3366FF #FF9900 #666666

Consegue-se as seguintes cores:

#000000 #000033 #000066 #000099 #0000CC #0000FF#003300 #003333 #003366 #003399 #0033CC #0033FF#006600 #006633 #006666 #006699 #0066CC #0066FF#009900 #009933 #009966 #009999 #0099CC #0099FF#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF

#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF

#330000 #330033 #330066 #330099 #3300CC #3300FF#333300 #333333 #333366 #333399 #3333CC #3333FF#336600 #336633 #336666 #336699 #3366CC #3366FF#339900 #339933 #339966 #339999 #3399CC #3399FF#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF#660000 #660033 #660066 #660099 #6600CC #6600FF#663300 #663333 #663366 #663399 #6633CC #6633FF#666600 #666633 #666666 #666699 #6666CC #6666FF#669900 #669933 #669966 #669999 #6699CC #6699FF#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF#990000 #990033 #990066 #990099 #9900CC #9900FF#993300 #993333 #993366 #993399 #9933CC #9933FF#996600 #996633 #996666 #996699 #9966CC #9966FF#999900 #999933 #999966 #999999 #9999CC #9999FF#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF


Tabelas em HTML

Uma tabela é um conjunto de células organizadas dentro das quais podemos alojar distintosconteúdos.

À princípio, poderia parecer que as tabelas são raramente úteis e que podem ser utilizadassimplesmente para listar dados como agendas, resultados e outros dados de uma formaorganizada. Nada mais distante da realidade.

Hoje, grande parte dos desenhadores de páginas baseia seu planejamento neste tipo deengenhoca. De fato, uma tabela nos permite organizar e distribuir os espaços da melhor forma.Pode nos ajudar a gerar textos em colunas como os jornais, prefixar os tamanhos ocupados pordistintas seções da página ou colocar de uma maneira simples uma legenda a uma imagem.

Pode ser que a princípio seja um pouco complicado trabalhar com estas estruturas mas, sedesejamos criar uma página de qualidade, mais cedo ou mais tarde teremos que nos ver com elase nos dar conta das possibilidades que nos oferecem.

Para começar, nada mais simples do que pelo princípio: as tabelas são definidas pelas etiquetas<table> e </table>

Dentro dessas duas etiquetas colocaremos todas as outras etiquetas, textos e imagens qued ã f úd à b l

darão forma e conteúdo à tabela.

As tabelas são descritas por linhas da esquerda para direita. Cada uma destas linhas é definidapor outra etiqueta e seu fechamento: <tr> e </tr>

Ainda assim, dentro de cada linha, haverá diferentes células. Cad uma dessas células serádefinida por outro par de etiquetas:<td> e </td>. Dentro desta etiqueta será onde colocaremosnosso conteúdo.

Aqui temos um exemplo de estrutura de tabela:

<table><tr><td>Célula 1, linha 1</td><td>Célula 2, linha 1</td></tr><tr><td>Célula 1, linha 2</td><td>Célula 2, linha 2</td></tr></table>

O resultado:Célula 1, linha 1 Célula 2, linha1Célula 1, linha 2 Célula 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 tambémusando as que já vimos.

Por exemplo, assinalamos a etiqueta <th>, que serve para criar uma célula cujo conteúdo estejaformatado como um título ou cabeçalho da tabela. Na prática, o que faz é colocar em negrito ecentralizado o conteúdo dessa célula, o que se pode conseguir aplicando as correspondentesetiquetas dentro da célula. Assim:

<td align="center"><b>Conteúdo da célula</b></td>

A partir desta idéia simples, as tabelas adquirem outra magnitude quando lhes incorporamos todauma bateria de atributos aplicados sobre cada tipo de etiquetas que as compõem. Ao longo dospróximos capítulos nos aprofundaremos no estudo desses atributos de forma a proporcionar-lhetudo que é útil e indispensável para um bom arranque em páginas.


Tabelas em HTML. Atributos para filas e células.

Vimos no capítulo anterior que as tabelas estão compostas de linhas que, por sua vez, contémcélulas. As células são delimitadas pelas etiquetas <td> ou pelas etiquetas <th> (se queremostexto 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, destaforma, dar forma a seu conteúdo.As etiquetas situadas no interior da célula não modificam o resto do documento.As etiquetas de fora da célula não são tidas em conta por esta.

Sendo assim, podemos especificar o formato de nossas células a partir de etiquetas introduzidasem seu interior ou mediante atributos colocados dentro da etiqueta de célula <td> ou também,em alguns casos dentro da etiqueta <tr> se desejamos que o atributo seja válido para toda a

em alguns casos, dentro da etiqueta <tr>, se desejamos que o atributo seja válido para toda alinha. A forma mais útil e atual de dar forma às células é 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 construção de nossas tabelas. Começamos vendoalguns atributos que nos permite modificar uma célula em concreto ou toda uma linha.

align Justifica o texto da célula da mesma forma que se fosse o de um parágrafo.

valign Podemos escolher se queremos que o texto apareça acima (top), no centro (middle) ouabaixo (bottom) da célula.

bgcolor Dá cor à célula ou escolha de linha.

bordercolor Define a cor da borda.

Outros atributos que podem ser unicamente atribuídos a uma célula e não ao um conjunto decélulas de uma linha são:

background Permite-nos colocar um fundo para a célula a partir de um link a uma imagem.

height Define a altura da célula em pixels ou porcentagem.

width Define a largura da célula em pixels ou porcentagem

colspan Expande um célula horizontalmente.

rowspan Expande um célula verticalmente.

Nota: O atributo height não funciona em todos os navegadores, ademais, seu uso não está muitoestendido. As células em geral, têm a altura que necessitam para caber todo o conteúdo que tenhainserido, ou seja, crescem o suficiente para que caiba o que colocamos dentro. O atributo width simque funciona em todos os navegadores e deve ser utilizado constantemente. Se lhe atribuímos umalargura à célula, a largura será respeitada e se a tal célula tiver muito texto ou qualquer outroconteúdo, a célula crescerá um tanto para baixo quanto for o necessário para caber o quecolocamos. Uma observação neste último parágrafo. Trata-se que se definimos uma célula de umalargura 100, por exemplo e colocamos na célula um conteúdo como uma imagem que meça mais de100 pixels, a célula crescerá em horizontalmente tanto quanto for necessário para que a imagemcaiba. Se o elemento, mesmo mais largo, fosse divisível (como um texto) a largura seria respeitadae o texto cresceria para baixo, ou o que é o mesmo, em altura, como assinalamos no parágrafoanterior.

Estes últimos quatro atributos descritos são de grande utilidade. Concretamente, height e widthnos ajudam a definir as dimensões de nossas células de uma forma absoluta (em pixel ou empontos de tela) ou de uma forma relativa, ou seja, por porcentagens referentes ao tamanho totalda tabela.

Por exemplo:

<td width="80"> Dará uma largura de 80 pixels à célula. Entretanto,

<td width =80%> Dará uma largura à célula do 80% da largura da tabela.

Há de ter em conta que, definidas as dimensões das células, o navegador vai fazer o quebondosamente puder para satisfazer ao programador. Isto quer dizer que pode que em algumasocasiões o resultado que obtenhamos não seja o esperado. Concretamente, se o texto apresentauma palavra excessivamente comprida pode que a largura da célula se veja aumentada paramanter a palavra na mesma linha. Por outro lado, se o texto é muito grande , a célula aumentarásua para poder mostrar todo o seu conteúdo.

Analogamente se, por exemplo, definimos duas larguras distintas às células de uma mesma coluna,

Analogamente se, por exemplo, definimos duas larguras distintas às células de uma mesma coluna,o navegador não saber qual atender. É por isso que é conveniente ter bem claro desde o princípiocomo é a tabela que queremos desenhar. Não é demais saber se pré-desenhamos no papel se acomplexidade é importante. O HTML em geral é fácil, mas as tabelas podem converte-se em umverdadeiro quebra-cabeça se não chegamos a compreende-las devidamente.

Os atributos rowspan e colspan são também utilizados freqüentemente. Graças a isso é possívelexpandir células fundindo estas com suas vizinhas. O valor que podem tomar estas etiquetas énumérico. O número representa a quantidade de células fundidas.

Assim, <td colspan="2"> Fundirá a célula em questão com sua vizinha direita.

Esta célula tem um colspan="2"

Célula normal Outra célula

Do mesmo modo, <td rowspan="2">

Esta célula tem rowspan="2",por isso tem fundida a célula

abaixo.

CélulaNormal

Outracélulanormal

A célula expandirá para baixo fundindo-se com a célula inferior.

O resto dos atributos apresentados apresenta uma utilidade e um uso bastante óbvio. Por isso, osdeixamos a sua própria investigação.


Tabelas em HTML. Atributos da tabela e conclusão.

Além dos atributos específicos de cada célula ou linha, as tabelas podem ser adicionalmenteformatadas a partir dos atributos que nos oferece a própria etiqueta <table>. A seguir,mostramos aqueles que nos podem parecer à principio mais importantes:

align Alinha horizontalmente a tabela emrelação ao seu entorno.

background Permite-nos colocar um fundo para atabela desde um link a uma imagem.

bgcolor Dá cor de fundo à tabela.border Define o número de pixels da borda

principal.bordercolor Define a cor da borda.

cellpadding Define, em pixels, o espaço entre asbordas da célula e o conteúdo damesma.

cellspacing Define o espaço entre as bordas (empixels).

height Define a altura da tabela em pixels ouporcentagem

Esta tabela está alinhada à direita(aling="right"). Tem somente umacélula.

Esta tabela está alinhada àesquerda (aling="left"). Temsomente uma célula.

porcentagem.width Define a largura da tabela em pixels ou

porcentagem.

Os atributos que definem as dimensões, height e width, funcionam de uma maneira análoga aodas células, tal como vimos no capítulo anterior. Contrariamente, o atributo align não nos permitejustificar o texto de cada una das células que compõem a tabela, mas sim que permite, justificara própria tabela em relação ao seu entorno.

Vamos colocar três exemplos de alinhamento de tabelas, centralizadas, alinhadas à direita e àesquerda.

Exemplo detabela

centralizada

Esta tabela está centralizada(aling="center"). Tem somente umacélula.

Este seria um texto qualquer colocado ao lado de uma tabela centralizada.

Exemplo detabela alinhada

à direita

Para que seja visto o efeito de alinhamento databela devemos colocar um texto ao lado e o textoirá rodear a tabela, assim como ocorreria como asimagens alinhadas a um lado.

Exemplo detabela alinhada

à esquerda

Para que seja visto o efeito de alinhamento databela, devemos colocar um texto ao lado e o textoirá rodear a tabela, assim como ocorreria com asimagens alinhadas a um lado.

Os atributos cellpading e cellspacing ajudarão a dar a nossa tabela um aspecto mais estético. Àprincípio pode nos parecer um pouco confuso seu uso mas com um pouco de prática 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 célula têm prioridade emrelação aos definidos para uma tabela. Podemos definir, por exemplo, uma tabela com a cor defundo vermelha e uma das células com a cor de fundo verde. E assim, toda a tabela será vista decor vermelha manos a célula verde. Da mesma forma, podemos definir uma cor azul para asbordas da tabela e fazer com que uma célula particular seja mostrada com uma borda vermelha.(Apesar de que isto não funcionará em todos os navegadores devido ao fato de alguns nãoreconhecerem o atributo bordercolor.)

Tabela de corvermelha defundo

O atributo bgcolor databela está em vermelho.

Célula normalEsta célula está em verde.Tem o atributo bgcolor nacor verde

Tabelas aninhadas

O uso de tabelas aninhadas também é muito útil. Da mesma forma que podíamos incluir listasdentro de outras listas, as tabelas podem ser incluídas dentro de outras. Assim, podemos incluiruma tabela dentro da célula de outra. A forma de funcionamento continua sendo o mesmo apesarde que a situação pode se complicar se o número de tabelas incluídas dentro de outras forelevado.

VenezuelaColômbiaEquador

Perú

ArgentinaChile

UruguaiParaguai

Vamos ver um código de um aninhamento de tabelas. Veremos primeiro o resultado e em seguida,o código, pois assim conseguiremos entendê-lo melhor.

Célula da tabela principalTabela aninhada, célula 1 Tabela aninhada, célula 2

Tabela aninhada, célula 3 Tabela aninhada, célula 4

Este seria o código:

<table cellspacing="10" cellpadding="10" border="3"> <tr> <td align="center"> Célula da tabela principal </td> <td align="center"> <table cellspacing="2" cellpadding="2" border="1"> <tr> <td>Tabela aninhada, célula 1</td> <td>Tabela aninhada, célula 2</td> </tr> <tr> <td>Tabela unida, célula 3</td> <td>Tabela aninhada, célula 4</td> </tr> </table> </td> </tr> </table>

Exemplos práticos

Estas são as informações que pretendíamos transmitir-lhes sobre as tabelas em HTML. Agora seriaimportante fazer algum exemplo de realização de uma tabela um pouco mais complexa. Porexemplo, a seguinte:

Animais em perigo de extinção

Nome Cabeças Previsão 2010 Previsão 2020

Baleia 6000 4000 1500

Urso Pardo 500

Lince 10

Tigre 300 210

Outro exemplo de tabela com a qual podemos praticar:

Climas de América do Sul

Norte daAmérica de Sul.Países como:

Sul da Américado Sul. Paísescomo:

Floresta tropical, clima desavana, clima marítimo cominvernos secos.

Climas marítimos comverões secos, cominvernos secos, climasfrios, clima de estepe,clima desértico.


Formulários HTML

Até agora vimos a forma na qual o HTML providencia e mostra a informação, essencialmentemediante o texto, imagens e links. Falta ver de que forma podemos trocar informações com nossovisitante. Desde então, este novo aspecto é primordial para a grande quantidade de ações que sepodem realizar mediante o Web: Comprara um artigo, preencher uma enquete, enviar umcomentário ao autor...

Vimos anteriormente que poderíamos, mediante os links, entrar em contato diretamente com umcorreio eletrônico. Entretanto, esta opção pode ser em alguns casos pouco versátil se o quedesejamos é que o navegante nos envie uma informação bem precisa. É através dele, o HTML quepropõem outra solução muito mais ampla: Os formulários.

Os formulários são estas famosas caixas de texto e botões que podemos encontrar em muitaspáginas web. São muito utilizados para realizar buscar ou também para introduzir dados pessoais,por exemplo, em sites de comércios eletrônico. Os dados que o usuário introduz nestes campossão enviados ao correio eletrônico do administrador do formulário ou também, em um programaque se encarrega de processá-lo automaticamente.

Usando HTML podemos unicamente enviar o formulário a um correio eletrônico. Se quisermosprocessar o formulário mediante um programa, a coisa pode ser um pouco mais complexa, já queteremos que empregar outras linguagens mais sofisticadas. Neste caso, a solução mais simples éutilizar os programas pré-desenhados que nos propõem um grande número de servidores dehospedagem e que nos permitem armazenar e processar os dados em forma de arquivo ou outrosformatos. Se sua página es ta hospedada em um servidor que não lhe propõem estes tipos devantagens, você sempre poderá recorrer a servidores de terceiros que oferecem este ou outrostipos de serviços gratuitos para webs. É claro que também existe outra alternativa que é a deaprender linguagens como ASP ou PHP que nos permitirá, entre outras coisas, o tratamento deformulários.

Os formulários são definidos por meio das etiquetas <form> e </form>. Entre estas duas etiquetascolocaremos todos os campos e botões que compõem o formulário. Dentro desta etiqueta <form>devemos especificar alguns atributos.:

Action

Define o tipo de ação a realizar com o formulário. Como já dissemos, existem duas possibilidades:

O formulário é enviado a um endereço de correio eletrônicoO formulário é enviado a um programa ou script que processa seu conteúdo.

No primeiro caso, o conteúdo do formulário é enviado ao endereço de correio eletrônicoespecificada por meio de uma sintaxe deste tipo:

<form action="mailto:endereç[email protected]"…>

Se o que queremos é que o formulário seja processado por um programa, temos de especificar oendereço do arquivo que contem o tal programa. A etiqueta ficaria neste caso da seguinte forma:

<form action="endereço do arquivo"...>

A forma na qual se expressa a localização do arquivo que contém o programa é a mesma que avista para os links.

Method

Este atributo se encarrega de especificar a forma na qual o formulário é enviado. Os dois valorespossíveis que este atributo pode tomar são post e get. A efeitos práticos e salvo se lhe disseremo contrário, daremos sempre o valor post.

Enctype

Utiliza-se para indicar a forma na qual viajará a informação que for mandada pelo formulário. Nocaso mais corrente, enviar o formulário por correio eletrônico, o valor deste atributo deve ser"text/plain". Assim, conseguimos que o conteúdo do formulário seja enviado como texto planodentro do e-mail.

Se quisermos que o formulário se processe automaticamente por um programa, geralmente nãoutilizaremos este atributo, de forma que tome seu valor padrão, ou seja, não incluiremos enctypedentro da etiqueta <form>.

Exemplo de etiqueta <form> completa

Assim, para o caso mais habitual - o envio do formulário por correio - a etiqueta de criação doformulário terá o seguiente aspecto:

<form action="mailto:endereç[email protected] (ou o nome do arquivo de processo)" method="post"enctype="text/plain">

Entre esta etiqueta e seu fechamento, colocaremos o resto de etiquetas que darão forma aonosso formulário, as quais serão vistas nos próximos capítulos.


Elementos de formulários. Campos de texto.

O HTML nos propõem uma grande diversidade de alternativas na hora de criar nossos formulários.Estas vão desde a clássica caixa de texto até a lista de opções passando pelas caixas devalidação.

Veremos em que consiste cada una destas modalidades e como podemos implementá-las emnosso formulário.

Texto curto

As caixas de texto são colocadas por meio da etiqueta <input>. Dentro desta etiqueta temos deespecificar 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 conteúdo será chamadonome (por exemplo). O aspecto deste tipo de caixas é conhecido, como pode ser visto aqui:

O nome do elemento do formulário é de grande importância para poder identificá-lo em nosso

O nome do elemento do formulário é de grande importância para poder identificá lo em nossoprograma de processamento ou no e-mail recebido. Por outro lado, é importante indicar o atributotype, já que, como veremos, existem outras modalidades de formulário que usam esta mesmaetiqueta.

O emprego destas caixas está fundamentalmente destinado à tomada de dados breves: palavrasou conjuntos de palavras de longitude relativamente curta. Veremos mais adiante que existeoutra forma de tomar textos mais longos a partir de outra etiqueta.

Além destes dois atributos, essenciais para o correto funcionamento de nossa etiqueta, existemoutra série de atributos que podem ser de utilidade, mas que não são imprescindíveis.

size Define o tamanho da caixa em número de caracteres. Se ao escrever o usuário chega ao final dacaixa, o texto irá desfilando à medida que se escreve fazendo desaparecer a parte de texto quefica à esquerda.

maxlength Indica o tamanho máximo do texto que pode ser tomado pelo formulário. É importante nãoconfundí-lo com o atributo size. Enquanto o primeiro define o tamanho aparente da caixa detexto, maxlength indica o tamanho máximo real do texto que pode ser escrito. Podemos ter umacaixa de texto com um tamanho aparente (size) que é menor do que o tamanho máximo(maxlength). O que ocorrerá neste caso é que, ao escrever, o texto irá desfilando dentro dacaixa até que cheguemos ao seu tamanho máximo definido por maxlength, momento no qual seráimpossível continuar escrevendo.

value Em alguns casos pode ser interessante atribuir um valor definido ao campo em questão. Isto podeajudar ao usuário a preencher mais rapidamente o formulário ou a dar alguma idéia sobre anatureza de dados que se requerem. Este valor inicial do campo pode ser expresso mediante oatributo 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 conteúdo, ressaltamos: Quando queremos utilizar em qualquersituação elementos de formulário devemos escrevê-los sempre entre as etiquetas <form> y</form>. Caso contrário, os elementos serão vistos perfeitamente no Explorer, mas não noNetscape.

Com outras palavras, no Netscape não se visualizam os elementos de formulário a não ser queestejam colocados entre as correspondentes etiquetas de início e fim de formulário.

É por isso que para mostrar um campo de texto não adianta colocar a etiqueta <input>, e sim,coloca-la dentro de um formulário. Assim:

<form> <input type="text" name="nome" value="Josefa Palotes"> </form>

Veremos posteriormente que este atributo pode ser relevante em determinadas situações.

Texto oculto

Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer uma certaconfiabilidade. Este tipos de campos são análogos aos de texto com somente uma diferença: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 serão

vistos asteriscos.

Estes campos são ideais para a introdução de dados confidenciais, principalmente códigos deacesso. Isto pode ser visto em funcionamento a seguir:

Texto longo

Se desejarmos colocar à disposição do usuário um campo de texto onde possa escrevercomodamente sobre um espaço composto de várias linhas, temos de convocar uma novaetiqueta: <textarea> e seu fechamento correspondente.

Estes tipos de campos são práticos quando o conteúdo a enviar não é um nome, telefone ouqualquer outro dado breve, e sim, um comentário, opinião, etc.

Dentro da etiqueta textarea deveremos indicar, como para o caso visto anteriormente, o atributoname para associar o conteúdo a um nome que será semelhante a uma variável nos programas deprocesso. Além disso, podemos definir as dimensões do campo a partir dos seguintes atributos:

rows Define o número de linhas do campo de texto.

cols Define o número de colunas do campo de texto.

A etiqueta fica portanto, desta forma:

<textarea name="comentário" rows="10" cols="40"></textarea>

O resultado é o seguinte:

Mesmo assim, é possível definir o conteúdo do campo. Para isso, não usaremos o atributo value esim, que escreveremos dentro da etiqueta o conteúdo que lhe desejamos atribuir. Vejamos:

<textarea name="comentário" rows="10" cols="40">Escreva seu comentário....</textarea>

Terá como resultado:

Escreva seu comentário....


Outros elementos de formulários

Efetivamente, os textos são uma maneira muito prática de fazer chegar a informação donavegante. Porém, em muitos casos, os texto são dificilmente adaptáveis a programas quepossam processá-los devidamente ou também pode ser que seu conteúdo não se ajuste ao tipode informação que requeremos. É por isso que, em determinados casos, pode ser mais efetivopropor uma escolha ao navegante a partir da exposição de uma série de opções.

Este é o caso de, por exemplo, oferecer uma lista de países, o tipo de cartão de crédito para umpagamento, etc.

Estes tipos de opções podem ser expressadas de diferentes formas. Vejamos a seguir quais são:

Listas de opções

As listas de opções são esse tipo de menus desdobráveis que nos permite escolher uma (ouvárias) das múltiplas opções que nos propõem. Para construí-las utilizaremos uma etiqueta comseu respectivo fechamento: <select>

Como para os casos já vistos, dentro desta etiqueta definiremos seu nome por meio do atributoname. Cada opção será incluída em uma linha precedida da etiqueta <option>.

Podemos ver, a partir destas diretrizes, a forma mais típica e simples desta etiqueta:

<select name="estação"> <option>Primavera</option> <option>Verão</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 número de valores mostrados da lista. O resto pode ser visto por meio da barra lateral dedeslocamento.

multiple Permite a seleção de mais vários elementos da lista. A escolha de mais de um elemento se fazcomo com o explorador de Windows, a partir das teclas ctrl ou shift. Este atributo se expressasem valor algum, ou seja, não se utiliza com o igual: simplesmente se coloca para conseguir oefeito, ou não se coloca se quisermos uma lista desdobrável comum.

Conselho: Se for possível, não utilize multiple

Não recomendamos especialmente a prática desta opção já que o manejo das teclas ctrl ou shiftpara escolher várias opções pode ser desconhecido para o navegante. Evidentemente, sempre cabea possibilidade de explicar como funciona a pesar de ser uma complicação a mais para o visitante.

Vejamos qual é o efeito produzido por estes dois atributos mudando a linha: <select name="estação">

por:

<select name="estação" size="3" multiple>

A lista ficará desta forma:

PrimaveraVerãoOutonoInverno

A etiqueta <option> ainda pode ser precisada por meio de outros atributos

selected Da mesma forma que multiple, este atributo não toma nenhum valor senão que simplesmenteindica que a opção que apresenta está escolhida por padrão.

Assim, se mudamos a linha do código anterior: <option>Outono</option>

por: <option selected>Outono</option>

O resultado será:

Outono

value Define o valor da opção que será enviada ao programa ou ao correio eletrônico se o usuárioescolhe essa opção. Este atributo pode ser muito útil se o formulário for enviado a um programavisto que a cada opção se pode associar um número ou letra, o qual torna-se mais facilmentemanipulável que uma palavra ou texto. Poderíamos assim escrever linhas do tipo:

<option value="1">Primavera</option>

Deste modo, se o usuário escolhe primavera, o que chegará ao programa (ou ao correio) é umavariável chamada estação que terá com valor 1. No correio eletrônico receberíamos:

estação=1

Botões de radio

Existe outra alternativa para expor uma escolha, neste caso, obrigamos ao internauta a escolherunicamente uma das opções que lhe propõem.

A etiqueta empregada neste caso é <input> na qual teremos a atributo type que temos de tomaro valor radio. Vejamos um exemplo:

<input type="radio" name="estação" value="1">Primavera <br><input type="radio" name="estação" value="2">Verão <br><input type="radio" name="estação" value="3">Outono <br><input type="radio" name="estação" value="4">Inverno

Nota: Temos de observar que a etiqueta <input type="radio"> somente coloca o campo para clicarna página. Os textos que aparecem ao lado, assim como as quebras de linha, colocamos com ocorrespondente texto no código da página e com as etiquetas HTML que necessitarmos.

O l d é i

O resultado é o seguinte:

Primavera Verão Outono Inverno

Como podemos ver, a cada uma das opções se atribui uma etiqueta input dentro da qualatribuimos o mesmo nome (name) para todas as opções e um valor (value) distinto. Se o usuárioescolhe supostamente Outono, receberemos em nosso correio uma linha tal como esta:

estação=3

Cabe assinalar que é possível pré-selecionar por padrão uma das opções. Isto se pode conseguirpor meio do atributo checked:

<input type="radio" name="estação" value="2" checked>Verão

Vejamos o efeito:

Primavera Verão Outono Inverno

Caixas de validação

Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples cliquesobre a caixa em questão. A sintaxe utilizada é muita parecida com as vistas anteriormente:

<input type="checkbox" name="paella">Adoro uma feijoada

O efeito:

Adoro uma feijoada

A única diferença fundamental é o valor adotado pelo atributo type.

Da mesma forma que para os botões de radio, podemos ativar a caixa por meio do atributochecked.

O tipo de informação que chegará ao nosso correio (ou ao programa) será do tipo:

feijoada=on (ou off dependendo se tiver sido ativada ou não)


Botão Submit, Apagar Campos e outros em formulários HTML

Os formulários têm de dar lugar não somente à informação a tomar do usuário como também, aoutra série de funções. Concretamente, permite-nos seu envio mediante seu botão. Tambémpode ser prático poder propor um botão de Apagar Campos ou também, acompanhá-lo de dadosocultos que possam ajudar-nos em seu processamento.

Neste capítulo, para terminar a saga de formulários, tornaremos conhecidos os meios de instalar

p , p g ,todas estas funções.

botão Submit (ou de envio)

Para finalizar o processo de preenchimento do formulário e fazê-lo chegar a seu gestor, onavegante tem de validá-lo por meio de um botão previsto para tal efeito. A construção de talbotão não implica nenhuma dificuldade uma vez familiarizados com as etiquetas input já vistas:

<input type="submit" value="Enviar">

Com este código geramos um botão como este:

Enviar

Como pode ser visto, somente temos de especificar se trata de um botão de envio(type="submit") e temos de definir a mensagem do botão por meio do atributo value.

botão Apagar Campos

Este botão nos permitirá apagar o formulário por completo no caso de que o usuário desejerefazê-lo desde o princípio. Sua estrutura sintática é igual a anterior:

<input type="reset" value="Apagar Campos">

A diferença do botão de envio, indispensável em qualquer formulário, o botão de Apagar Campos émeramente optativo e não é utilizado freqüentemente. Há de ter cuidado de não coloca-lo muitoperto do botão de envio e de distinguir claramente um do outro.

Dados ocultos

Em alguns casos, aparte dos próprios dados enviados pelo usuário, pode ser prático enviar dadosdefinidos por nós mesmos que ajudem ao programa em seu processamento do formulário. Estestipos de dados, que não se mostram na página, mas que podem ser detectados solicitando ocódigo fonte, não são freqüentemente utilizados por páginas construídas em HTML, são maisusados por páginas que empregam tecnologias de servidor. Não se assustem, pois veremos maisadiante o que isto quer dizer. Queremos apenas dar constância de sua existência e de seu modode criação. Como por exemplo:

<input type=hidden name="site" value="www.criarweb.com">

Esta etiqueta, incluída dentro de nosso formulário, enviará um dado adicional ao correio ou aoprograma encarregado da gestão do formulário. Poderíamos a partir deste dado, tornar conhecidoao programa a origem do formulário ou algum tipo de ação a realizar (um re-endereçamento, porexemplo).

Botões normais

Dentro dos formulários também podemos colocar botões normais, clicáveis como qualquer outrobotão. Da mesma forma que ocorre com os campos hidden, estes botões por si só não têm muitautilidade, mas poderemos necessita-los para realizar ações no futuro. Sua sintaxe é a seguinte:

<input type=button value="Texto escrito no botão">

Ficaria desta maneira:

Texto escrito no botão

O uso mais frequente de um botão é na programação no cliente. Utilizando linguagens comoJavascript podemos definir ações a tomar quando um visitante clique o botão de uma página web.

Exemplo de formulário

Com este capítulo finalizamos nosso assunto sobre formulários. Passamos agora a exemplificar

todo o aprendido a partir da criação de um formulário que consulta o grau de satisfação dosusuários de uma linha de ônibus fictícia. O formulário está construído para que envie os dados porcorreio eletrônico a uma caixa de entrada determinada.Vemos o formulário nesta página. Vocês tratem de construí-lo para ver se realmente entenderambem os temas sobre formulários.

Nome

E-mail @

Cidade Sexo

Homem Mulher

Frequência das viagens Várias vezes por dia

Comentários sobre sua satisfação pessoal

Desejo receber notificação das novidades nas linhas de ônibus.

Enviar formulário

Apagar tudo

A seguir também mostraremos o código fonte deste formulário, que é importante que todos dêemuma olhada, mesmo que seja rapidamente.

<form action="mailto:[email protected]" 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> Cidade <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> Frequência das viagens <br> <select name="utilização"> <option value="1">Várias vezes por dia <option value="2">Uma vez por dia <option value="3">Várias vezes por semana <option value="4">várias vezes por mês </select> <br> <br> Comentários sobre sua satisfação pessoal <br> <textarea cols="30" rows="7" name="comentários"></textarea> <br>

b

<br> <input type="checkbox" name="receber_info" checked> Desejo receber notificação das novidades nas linhas de ônibus. <br> <br> <input type="submit" value="Enviar formulário"> <br> <br> <input type="Reset" value="Apagar tudo"> </form>

Para acabar, vamos ver o que receberiam por correio eletrônico na empresa de ônibus quando umusuário qualquer preenchesse este formulário e clicasse sobre o botão de envio.

nome=Frederico Silvestre [email protected] cidade=Rio de Janeiro sexo=Masculino utilização=2 comentários=Acho que não é uma boa linha. Colocar mais ônibus. receber_info=on


Mapas de imagens com HTML

Nos capítulos anteriores nos aprofundamos no elemento básico de navegação do web: O linkhipertexto. Vimos que estes links são palavras, textos ou imagens que, ao clicar sobre eles, nosenviam a outras páginas ou zonas.

Os mapas de imagem são uma nova exposição de navegação que incorpora uma série de linksdentro de uma mesma imagem. Estes links são definidos por figuras geométricas e funcionamexatamente da mesma forma que os outros links. Pode-se ver o funcionamento de um neste link.

À princípio, estes mapas não eram diretamente reconhecidos pelos navegadores e recorriam àtecnologias de lado do servidor para serem visualizados. Hoje em dia podem ser implementadospor meio de código HTML tal como veremos neste capítulo.

Podemos utilizar estes mapas, por exemplo, em portais onde tornamos conhecida cada uma dassessões do site por meio de uma imagem. Também pode ser muito prático, em mapas geográficosonde cada cidade, estado ou ponto qualquer representa um link a uma página.

Em qualquer caso, o uso destes mapas tem de ser sistematicamente acompanhado de um textoexplicativo que dê a entender ao usuário sobre os distintos pontos da imagem. Frases como "Dêum clique sobre tal ícone para acesar a tal informação". São muito indicativas na hora de fazerintuitiva a navegação pelos mapas de imagens. Por outro lado, não é demais introduzir essamesma explicação 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 código, situado no interior da etiqueta <map>, que delimitará por meio de linhasgeométricas imaginárias cada uma das áreas dos links apresentados na imagem.

As linhas geométricas que delimitan os links, ou seja, as áreas dos links, devem ser definidas pormeio de coordenadas. Cada imagem é definida por umas dimensões de largura (X) e altura (Y) ecada ponto da imagem pode ser definido portanto, dizendo a que altura (x) e largura (y) nosencontramos. Deste modo, a esquina superior esquerda corresponde à posição 0,0 e a esquinainferior direita corresponde às coordenadas X,Y. Se desejamos saber quais coordenadascorrespondem a um ponto concreto de nossa imagem, o melhor é utilizar um programa de desenho

gráfico como Photoshop ou Paint Shop Pro.

A melhor forma de explicar o funcionamento deste tipo de mapa é a partir de um exemplo prático.Suponhamos que temos uma imagem com um mapa como esta:

Clique nos círculos para acessar às seções!

Dentro dela queremos introduzir um link a cada um dos elementosque a compõem. Para isso, definiremos nossos links como zonascirculares de tamanho pequeno que serão distribuídas ao comprimento e largura da imagem.

Vejamos a seguir o código que utilizaremos:

<table border=0 width=450><tr><td align="center"> <map name="mapa1"> <area alt="Clique para ver a página de meus amigos" shape="CIRCLE" coords="44,36,29" href="#"> <area alt="Clique para ver minha noiva" shape="CIRCLE" coords="140,35,31" href="#"> <area alt="Clique para conhecer minha família" shape="circle" coords="239,37,30" href="#"> <area alt="Clique para conhecer meu trabalho" shape="CIRCLE" coords="336,36,31" href="#"> </map> <img src="../../../../docs/artigos/imagens/mapa1.gif" width="380" height="72" alt="Mapa de imagens. Clique emcada um dos círculos." border="0" usemap="#mapa1"> <br> Clique nos círculos para acessar às seções! </td></tr></table>

Nota: Os href das áreas vão a # Este é um exemplo parcial de utilização dos mapas, faltaria colocar os href com valoresreais e não com a #. Cada um dos links das áreas -atributo href da etiqueta <area>-deveriam levar a uma página web. O exemplo ficaria completo se criássemos todas aspáginas onde linkar as áreas e colocássemos os href dirigidos para tais páginas. Comonão fizemos as páginas "destino" colocamos links que não levam a lugar nenhum, que,como se pode ver, indica-se com o caráter "#".

É possível observar, tal como explicamos antes, que nosso mapa consta de duas partesprincipais: 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.

coordsAs coordenadas que definem a área. Será um grupo de valores numéricos distintos dependendodo tipo de área (shape) que estivermos definindo.

hrefPara indicar o destino do link correspondente à área.

Neste caso utilizamos umas áreas circulares (shape="CIRCLE"), que se definem indicando o centrodo círculo -uma coordenada (X,Y) e o radio, que é um número inteiro que se corresponde com onúmero de pixels desde o centro até a borda do círculo.

Tipos de áreas: shape distintas.

Existem três tipos de áreas distintas, suficientes para fazer quasequalquer tipo de figura. No desenho que acompanha estas linhaspode ser visto uma representação das áreas, que detalhamos aseguir.

shape="RECT"

Cria uma área retangular. Para defini-la utilizam-se ascoordenadas dos pontos da esquina superior esquerda e daesquina inferior direita. Tal como estão nomeadas taiscoordenadas 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 centrodo círculo e o radio. De acordo com nosso desenho, a etiqueta deuma á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 polígono fica definido indicandotodos seus pontos, mas atenção, pois temos que indicá-los em ordem, seguindo o caminhomarcado pelo perímetro do polígono. Segundo nosso desenho e os nomes que demos aos pontosdo polígono, 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 características de HTML são os frames, que foram acrescentados tantoem Netscape Navigator como em Internet Explorer, a partir de suas versões 2.0. Os frames -quesignificam em português janelas- são uma forma de dividir a página em diferentes espaçosindependentes uns dos outros, de forma que em cada espaço se coloca uma página diferente quese codifica em uma arquivo HTML diferente.

À princípio se criaram como etiquetas proprietárias do navegador Netscape e rapidamente apotência do recurso fez com que o uso de frames se estendesse por toda a web. Pouco tempodemoraria para Internet Explorer incluí-los, pois não podia deixar escapar uma novidade tãopopular de seu competidor. Finalmente, como resposta à popularidade entre os desenvolvedoresdos frames, o padrão HTML 4.0 incluiu estas etiquetas dentro das permitidas.

Os frames, como dizíamos, nos permitem dividir a janela do navegador em diferentes áreas. Cadauma destas áreas são independentes e devem ser codificadas com arquivos HTML tambémindependentes. Como resultado, cada frame ou janela contem as propriedades específicas queindicamos no código HTML apresentado nesse espaço. Sendo assim, e dado que cada janela éindependente, terão suas próprias barras de deslocamento, horizontais e verticais,separadamente.

Existem muitas páginas na web que contém frames e certamente todos já tiveram a ocasião de

conhecer algumas. Costuma se utilizar para colocar em uma parte da janela uma barra denavegação, que geralmente encontra-se fixa e permite o acesso a qualquer zona da página web.Uma das principais vantagens da programação com frames vem derivada da independência dosdistintos frames, pois podemos navegar pelos conteúdos de nosso site web com a barra denavegação sempre visível, e sem que se tenha que recarregar em cada uma das páginas quevamos visitando.

Um exemplo das áreas que se podem construir em uma construção de frames pode ser visto nasimagens a seguir.


Frames – Explicação básica

As páginas web que estão feitas com frames se compõem de uma declaração das janelas etantas páginas em formato HTML corrente como distintas divisões tivermos definido. A declaraçãoou definição de frames é a única página que realmente devemos aprender, visto que as páginasque serão visualizadas em cada uma das janelas são arquivos HTML dos que viemos aprendendoanteriormente neste manual.

Tal definição está composta por etiquetas <FRAMESET> e <FRAME>, com as quais indicamos adisposição de todos os quadros. A etiqueta <FRAMESET> indica as divisões da janela donavegador e a etiqueta <FRAME> indica cada um dos quadros onde colocaremos uma páginaindependente.

As partições que se podem fazer com um <FRAMESET> são em filas ou colunas. Por exemplo,poderíamos indicar que desejamos fazer uma divisão da página em duas filas, ou duas colunas,três filas, etc. Para indicar tanto a forma de dividir a janela -em filas ou colunas- como o númerode partições que pretendemos fazer, temos de utilizar o atributo COLS ou ROWS. O primeiro servepara indicar uma partição em colunas e o segundo para uma partição em filas.

Nota: É importante indicar que não se pode fazer uma partição em filas e colunas de uma vez só, esim, que devemos escolher em dividir a janela em uma das duas disposições. Mais adiante,indicaremos como dividir a janela tanto em filas como em colunas, que é feito com o acréscimo deframes.

No atributo COLS ou ROWS -somente podemos escolher um dos dois- colocamos entre aspas onúmero de divisões que desejamos realizar, indicando de antemão o tamanho que vai atribuir acada uma. Um valor típico destes atributos seria o seguinte:

cols="20%,80%" Indica que devem ser colocadas duas colunas, a da esquerda teria uns 20% do espaço total dajanela e a da direita uns 80%.

rows="15%,60%,25%" Assim, indicamos que desejamos três filas, a de cima com um 15% do espaço total, a do meiocom um espaço correspondente ao 60% do total e a de abaixo com um 25%. Ao total somam o100% do espaço da janela.

100% do espaço da janela.

Além da porcentagem para indicar o espaço de cada um dos campos, também podemos indicá-loem 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 não tem porque ser assim em todos osmonitores dos usuários, por isso é importante que este modo de expressar as janelas se indiqueda seguinte maneira.

cols="200,*" Assim, indicamos que a primeira coluna tem de medir 200 pixels e que o resto do espaçodisponível -que será maior ou menor dependendo da definição da tela do usuário- se atribuirá asegunda coluna.

Na prática podemos misturar todos estes métodos para definir as janelas da maneira dedesejarmos, com porcentagem, com pixels ou com o asterístico (*). Não importa como sedefinem, a única recomendação é que um dos valores que indiquemos seja um asterisco, para quea área correspondente a tal asterisco seja mais ou menos grande dependendo do espaço quetenha a janela de nosso navegador. Outros métodos de definir filas e colunas, atendendo a esteconselho, seriam os seguintes:

rows="100,*,12%" Definimos três filas, a primeira com 100 pixels de largura, a segunda com o espaço que sobre dasoutras duas, e a terceira com um 12% do espaço total.

cols="10%,50%,120,*" Estamos indicando quatro colunas. A primeira de 10% do espaço da janela, a segunda com ametade justa da janela, a terceira com um espaço de 120 pixels e a última com a quantidade deespaço que sobre ao atribuir espaço às demais partições.

Uma vez indicado o número de filas ou colunas e o espaço reservado a cada uma com a etiqueta<FRAMESET>, devemos especificar com a etiqueta <FRAME> a procedência de cada um dosframes 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 página janela1.html em seuinterior.


Frames – Criação de uma estrutura simples

Para ilustrar tudo o que viemos explicando podemos ver o exemplo sobre como se criaria adefinição de frames da imagem que podemos ver a seguir.

<html> <head> <title>Definição 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 partição de frames em uma página a parte.

Além disso, temos algumas considerações a fazer para terminar de compreender este exemplo:

O título da definição de frames é o que herda toda a página web, por isso, não é boa idéiatitular como "definição de frames" por exemplo, já que então toda nossa página se titulariaassim e certamente não seria muito descritivo. Se estivéssemos fazendo uma página para oaçougue Gonçalves seria melhor titular a definição de frames algo como "AçougueGonçalves, as melhores carnes no Rio de Janeiro".A página que define os frames não tem body. O HTML pode totalizar um erro se oincluirmos.As páginas "pagina1.html", "pagina2.html" e "pagina3.html" devem ser escritas em arquivosindependentes com o nome indicado. Neste exemplo, Tais páginas deveriam se encontrar nomesmo diretório que a declaração de frames. Se especificarmos uma rota para acessar aoarquivo podemos colocá-lo no diretório que desejarmos.As cores de cada um dos frames colocamos com o atributo bgcolor colocado na etiqueta<BODY> de cada uma das páginas que se mostram nas janelas.


Frames – Uma página em cada moldura

As páginas que mostraremos em cada moldura são documentos HTML iguais aos que viemoscriando anteriormente. Podemos colocar qualquer elemento HTML dos estudados neste manual,como etiquetas de parágrafo, imagens, cores de fundo, etc.

Cada documento, como já indicamos, se escreve separado em seu próprio arquivo HTML. Para oexemplo do capítulo anterior podemos definir os arquivos HTML da seguinte maneira.

pagina1.html É a página que contém o título da web. Simplesmente se trata de uma etiqueta <H1> de título. Apágina tem seu próprio título, com a etiqueta <TITLE>, que não poderá ser visualizada nenhumlugar, a não ser que se mostre esta página sem os frames, já que as páginas dentro das janelasherdam o título da definição dos frames.

<html> <head> <title>Título Açougue Gonçalves</title> </head>

<body bgcolor="#DECC09"> <h1 align=center>Açougue Gonçalves</h1> /b d

</body> </html>

pagina2.html É a página que se apresentará na área principal da definição de frames, ou seja, a página quetem mais espaço para ser visualizada e onde colocaremos os conteúdos da web. Neste caso,mostra uma mensagem de bem-vindo à web, que fará as vezes de portal.

<html> <head> <title>Portal do Açougue Gonçalves</title> </head>

<body bgcolor="#CF391C" text="#ffffff"> <h1 align="center">Bem-vindo a nossa web</h1> <br> <br> O açougue Gonçalves, com mais de 100 anos de experiência, é a melhor fonte de carnes de boi ede porco da região. <br> <br> Tanto no inverno como no verão você pode encontrar nossas ofertas de temporada de primeiraqualidade. </body> </html>

pagina3.html Nesta página se mostrará a barra de navegação pelos conteúdos do site. Contém links quedeveriam atualizar o conteúdo da área principal da declaração de frames, para mostrar osdistintos conteúdos do sitio, por exemplo, o portal, os produtos, a página de contato, etc.

<html> <head> <title>Barra de navegação de açougue Gonçalves</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 página de frames com estes conteúdos, que simulam a página de umaçougue.


Frames – Orientar os links

A única particularidade destacável no exemplo do capítulo anterior, no manejo de frames emgeral, trata-se de que cada um dos links que colocamos nas páginas atualizam o frameonde está colocado este link. Por exemplo, se temos link na parte inferior da janela, no espaçocorrespondente a terceira janela, atualizarão os conteúdos do terceiro frame, que é onde estão

p j , , qsituados os links.

Este efeito que comentamos pode-se observar no exemplo da página do açougue, tal como ficariaao incluir os códigos das distintas páginas.

O lógico é que ao clicar sobre um link da barra de navegação atualizamos o frame principal, que éonde havíamos planejado colocar os conteúdos, no lugar do frame onde colocamos a barra denavegação, que deveria se manter fixa. Para conseguir este efeito devemos fazer duas coisas:

1. Dar um nome ao frame que desejamos atualizarTal nome se indica na etiqueta <FRAME> da definição de frames. Para isso utilizamos oatributo name, igualado ao nome que queremos dar a tal janela.

2. Orientar os links para esse framePara isso devemos colocar no atributo target dos links -etiqueta <A>- o nome do frame quedesejamos atualizar ao clicar o link.

Depois de dar um nome ao frame principal, nossa declaração de frames ficaria da seguintemaneira.

<frameset rows="15%,*,75"> <frame src="pagina1.html"> <frame src="pagina2.html" name="principal"> <frame src="pagina3.html"> </frameset>

Ademais, deveríamos 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 mudanças podemos ver como os links da barra de navegação simque atualizam a página que devem.

Valores para o atributo target

Como vimos, com o atributo target da etiqueta <A> podemos indicar o nome do frame quedesejamos que atualize esse link. Entretanto, este não é o único valor que podemos aplicar aoatributo. 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 manualcostumam abrir em uma janela a parte, colocando este valor no target dos links que levam aosexemplos.

_self Atualiza o frame onde está situado o link. É o valor por padrão.

_parent O link se atualiza sobre seu pai ou sobre a janela que estamos trabalhando, se não tiver um pai.

_top A página carrega a tela completa, ou seja, eliminando todos os frames que pudesse haver. Esteatributo é muito importante porque se colocamos em nossa página com frames um link a umapágina externa, se abriria em um dos frames e se manteriam visíveis outros frames da página,fazendo um efeito que costuma ser pouco agradável, porque parece que estão evitando que nosescapemos.

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 - Tradução de JML

Informe de Miguel Angel Alvarez Tradução de JMLe-mail: [email protected]

Frames – Aninhar frames

Para criar estruturas de janelas nas quais se misturam as filas e as colunas devemos aninharetiquetas <FRAMESET>. Começando pela partição de frames mais geral, devemos colocar dentroas partições de frames menores. A maneira de indicar isto se pode ver facilmente com umexemplo.

Os passos para definir o aninhamento podem ser encontrados à direita.

Os distintos frames vêem numerados com a ordem na qual são escritas no código.

Na imagem pode ser visto o resultado final acompanhada da representação sobre a maneira dedefini-los. Em primeiro definimos uma estrutura de frames em duas colunas e dentro da primeiracoluna colocamos outra partição de frames em duas filas. O código necessário é 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 página a parte.

Nota: colocamos uma margem em cada uma das linhas desta definição de frames para conseguirum código mais compreensível visualmente. Estas margens não são em absoluto necessários,simplesmente nos servem para ver em que nível de aninhamento nos encontramos.

O exemplo anterior pode se complicar um pouco mais se incluirmos mais partições. Vamos ver algoum pouco mais complicado para praticar mais com os aninhamentos de frames.

Os passos para definir o aninhamento podem ser encontrados à direita.

Os distintos frames vêem numerados com a ordemna qual se escrevem no código.

Na imagem se observa que o primeiro frameset a definir se compõe de duas filas Posteriormente

Na imagem se observa que o primeiro frameset a definir se compõe de duas filas. Posteriormente,dentro da segunda fila do primeiro frameset, temos outra partição em duas colunas, dentro dasque colocamos um terceiro nível de frameset com uma definção em filas nos dois casos. O códigopode 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 página a parte.

Até aqui vimos a parte mais básica da criação de frames. Nos próximos capítulos poderemosaprender a configurar as janelas para variar sua aparência e, entre outras coisas, eliminar asbarras que separam cada um dos distintos frames.


Frames – Atributos avançados

A parte da criação das janelas propriamente dita, existem muitos atributos com os que configurarsua aparência. Para isso, tanto a etiqueta <frameset> como <frame> admitem diversos atributosque permitem especificar a forma de elementos como as bordas dos frames, a margem, aexistência ou não de barras de deslocamento, etc.

Atributos para a etiqueta <frameset>

Já conhecemos o atributo cols e rows, que servem para indicar se a distribução em janelas sefará horizontalmente ou verticalmente. Somente se pode utilizar um deles e se iguala àsdimensões de cada uma das divisões, separadas por vírgulas.

border="número de pixels" Permite especificar de maneira global para todo o frameset o número de pixels que há de ter aborde dos frames.

bordercolor="#rrggbb" Com este atributo podemos modificar a cor da borda dos frames, também de maneira global atodo o frameset.

frameborder="yes|no|0" Serve para mostrar ou não a borda do frame. Seus possíveis valores são "yes" (para que se vejamas bordas) e "não" ou "0" (para que não se vejam). Na prática elimina a borda, mas permaneceuma linha de separação dos frames.

framespacing="número de pixels" Para determinar a largura da linha de separação dos frames. Pode -se utilizar em Internet Explorere junto com o atributo frameborder="0" serve para eliminar a borda das janelas.

Atributos para a etiqueta <frame>

Para esta etiqueta, assinalamos nos capítulos anteriores os atributos src, que servem para indicaro arquivo que contém a janela e name, para dar um nome à janela e logo direcionar os links paraele. Vejamos agora outros atributos disponíveis.

marginwidth="número de pixels" Define o número de pixels que tem a margem do frame onde se indica. Esta margem se aplica àpágina que pretendemos ver nessa janela, de modo que se colocamos 0, os conteúdos da páginanessa janela estarão completamente grudados na borda da margem e se indicamos um valor de10, os conteúdos da página estariam separados da borda 10 pixels.

marginheight="número 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. Seindicamos "yes" sempre sairão as barras, se indicamos "no" não sairão nunca e se colocamos"auto" sairão somente se forem necessárias. Auto é o valor por padrão.

Conselho: Há que ter cuidado se eliminamos as bordas dos frames, visto que a a página web podeter dimensões distintas dependendo da definição de tela do visitante. Se o espaço da janela se vêreducido, poderia se ver reduzido o espaço para o frame e pode acontecer de não caber oselementos que antes sim cabiam e se eliminamos as barras de deslocamento pode ser que ovisitante não possa ver todo o conteúdo da janela.

Este mesmo conselho pode ser aplicado ao redimensionamento de frames, que veremos no seguinteatributo. Se fizermos com que as janelas não sejam redimensionáveis provavelmente teríamos umadeclaração de frames demasiado rígida, que pode ser mal vista em algum tipo de tela.

noresize Este atributo não tem valores, simplesmente se coloca ou não se coloca. No caso de que estejapresente indica que o frame não se pode redimensionar. Como podemos ver, ao colocar o mousesobre a borda das janelas sai um cursor que nos assinala que podemos mover tal borda eredimensionar assim os frames. Por padrão, se não colocamos nada, as janelas podem serredimensionadas.

frameborder="yes|no|0" Este atributo permite controlar a aparição das bordas dos frames. Com este atributo igualado a"0" ou "não" as bordeas se eliminam. Entretanto, ficam as feias margens na borda. Pelo quepodemos 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 não funcionam sempre bem em todos os navegadores. Érecomendável fazermos um teste sobre o que estamos desenhando em vários navegadores paracomprovar que nosos frames se vêem 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 desenhadorespodem ter outras opiniões.

Referência: Se você deseja saber o que são os frames e como criá-los consulte os capítulos deFrames de nosso manual de HTML.

No meu caso, penso que é preferível não utilizá-los, apesar de que isso depende do tipo de website 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 meuponto de vista, outros podem ter outras opiniões.Vantagens de usar frames

A navegação da página será mais rápida. Apesar de que o primeiro caerregamento dapágina seria igual, em sucessivas impressões páginas já teremos algumas janelas salvas,que não teriam que voltar a descarregar.

Criar páginas do site seria mais rápido. Como não temos que incluir partes de código como abarra de navegação, título, etc. criar novas páginas seria um processo muito mais rápido.

Partes da página (como a barra de navegação) se mantém fixas e isso pode ser bom, paraque o usuário não as perca nunca de vista.

Estas mesmas partes visíveis constantemente, se contém links, podem servir muito bempara melhorar a navegação pelo site.

Mantém uma navegabilidade do site onde se navega, pois os elementos fixos conservam aimagem sempre visível.

Inconvenientes de usar frames

Tiram espaço da tela. O espaço ocupado pelos frames fixos se perde na hora de fazerpáginas novas, porque já está utilizado. Em definições de tela pequena ou em dispositivoscomo Palms, este problema se torna mais patente.

Forçam ao visitante a entrar pela declaração de frames. Se não o fazem assim, somente severia una página interior sem os requadros. Estes requadros poderian ser insuficientes parauma boa navegação pelos conteúdos e poderiam não conservar uma boa imagemcorporativa.

A promoção da página seria, à princípio, mais limitada. Isto é devido a que somente sedeveria promocioanr o portal, pois se se promocionam páginas interiores, poderia acontecero caso em que os visitantes entrassem por elas no lugar do portal, criando o problemadescrito no ponto anterior.

Muita gente não gosta porque não se sentem livers na navegação, pois entendem queestas partes fixas estão limitando sua mobilidade pela web. Este efeito se torna maispatente se a página com frames tem links a outras páginas web fora do site e, ao clicar umlink, se mostra a página nova com as janelas da página que tem frames.

Alguns navegadores não os suportam. Isto não é muito habitual, mas se estamos fazendouma página que queremos que seja totalmente acessiível deveríamos considerá-loimportante.

Os bookmarks ou favoritos não funcionam corretamente em muitos casos. Se quisermosincluir um favorito a uma página de um frame que não seja o portal podemos encontrarproblemas.

Pode acontecer que o botão detrás do navegador não 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 têm de comunicar vários framesentre si.

Conclusão

O trabalho com frames pode ser mais ou menos indicado dependendo das características dapágina a desenvolver, é sua tarefa saber se no seu caso deve utiliza-los ou não.


As etiquetas de HTML 4.0

Introdução. Quando Internet começava sua incontrolável escalada, a versão padrão HTML quecirculava era a 2.0, o qual continua suportando os navegadores mais atuais. Porém, asferramentas de que se dispunha não oferecia um controle preciso dos documentos.

Contudo, como até então o objetivo da Internet estava fundamentalmente orientado ao âmbitoacadêmico e não ao de design, não se deu muita importância à questão de lançar uma versãomelhorada do padrão até que Netscape, que até então era a empresa líder no setor, tomou ainiciativa de incluir novas etiquetas pensadas para melhorar o aspecto visual das páginas web.

Por este motivo o IETF (Internet Engineering Task Force) ou o que é o mesmo, Grupo de Trabalhoem Engenharia de Internet, começou a elaborar novos padrões, os quais deram como fruto oHTML 3.0, que resultou ser grande demais para as infra-estruturas que havia nesse momento, oqual dificultou sua aceitação.

Sendo assim, uma série de companhias (entre as que estavam Netscape, Sun Microsystems ouMicrosoft, 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 à WorldWide Web ao seu máximo potencial, desenvolvendo protocolos de uso comum, para normalizar ouso da web em todo o mundo.

O compromisso do W3C de encaminhar à Web ao seu máximo potencial inclui promover um altograu de acessibilidade para as pessoas com deficiências. O grupo de trabalho permanente WebAccessibility Initiative (WAI, Iniciativa para a Acessibilidade da Rede), em coordenação comorganizações ao redor de todo o mundo, persegue a acessibilidade da Web através de cinco áreasde trabalho principais: Tecnologia, diretrizes, ferramentas, formação, difusão, e investigação edesenvolvimento.

Desta iniciativa nasceu o rascunho de HTML 3.2 e em sua versão definitiva se introduzirammudanças essenciais para as possibilidades que os navegadores começavam a oferecer, estasinclusões 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.997este padrão incluindo como melhorias os frames, as folhas de estilo e a inclusão de scripts empáginas web, entre outras coisas.


As etiquetas de HTML 4.0 (1)

Entre o padrão do HTML 3.2 a 4.0 se introduziram novas etiquetas das quais daremos uma breveexplicação.

<Q>... </Q>

As etiquetas <Q> e </Q> agem de forma muito parecida a <BLOCKQUOTE> porém com aparticularidade de que se adiciona uma margem em parágrafos menores e sem a necessidade deromper o parágrafo.

Segundo, o W3C, a etiqueta <BLOCKQUOTE> é para adicionar margens largas e <Q>, paramargens menores, sem necessidade de romper o parágrafo.

Nota: No HTML 4.0 é imprescindível colocar a etiqueta de abertura e a de fechamento <Q>.... </Q>.

<ACRONYM>... </ACRONYM>

As etiquetas <ACRONYM>... </ACRONYM>, indicam que há um acrônimo no texto. Um acrônimo é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 versãopassada do documento. <DEL>... </ DEL> marca de maneira similar um texto de um documentoque se foi suprimido pela versão anterior.

<COLGROUP>... </COLGROUP>

Utiliza-se para ter um melhor controle sobre um o formato das tabelas especificando ascaracterísticas que compartilham como: largura, altura e alinhamento. Cada tabela deve ter pelo menos um <COLGROUP>; sem especificar nenhuma característica de <COLGROUP >. HTML 4.0 assume que uma tabela contém um só grupo de colunas e que estecontém todas as colunas de uma tabela. Por exemplo, isto nos serviria para criar uma tabela com uma célula na que pode se incluir umadescrição e depois seguido de check boxes para selecionar as opções desejadas.

Código: <TABLE> <COLGROUP span="10" width="30"> <COLGROUP span="1" width="0*"> <THEAD> <TR>...</ TABLE>

Desta forma, <COLGROUP> proporciona um formato mais agradável aos check boxes sem anecessidade de especificar, propriedades idênticas para cada fila.

A etiqueta de início < COLGROUP >, requer outra de fechamento. Com o qual obtemos: (em Nestcape só se verá a tabela, não o botão).


As etiquetas de HTML 4.0 (2)

<FIELDSET>... </FIELDSET>

Até agora, não dispúnhamos de nenhuma maneira de agrupar visualmente vários controles, se nãoaproveitássemos elementos que não são do formulário, como tabelas ou imagens. Agora, se fechamos uma parte de um formulário dentro da etiqueta FIELDSET se mostrará umretângulo ao redor dos mesmos. Ademais, podemos indicar um título por meio da etiqueta LEGEND,que admite o parâmetro align="left / center / right / top / bottom", o que nos permite alinhar otítulo horizontal e verticalmente. O único problema é que deveremos introduzir o conjunto em umacélula de tabela com uma largura determinado, já que se não fizermos assim a moldura abarcarátoda a largura de tela disponível.

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">Caixa de texto</font></legend> Coloque seu nome: <input type="text" size="15"> </fieldset> </td> </tr> <table> </form>

/form

<LABEL>... </LABEL>

Até pouco tempo atrás os campos de entrada não estavam associados a eles mesmos. Porexemplo; na hora de clicar sobre um campo de confirmação, não acontecia nada! Porém agora, seo 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 implementação dos padrões HTML 4.0 contamos com várias etiquetas novas paraconstruir formulários, sendo BUTTON uma delas, aliás, bastante. O problema é que as versões de4 de Nestcape foram lançadas antes destas implementações, por isso estas etiquetas só podemser visualizadas corretamente com Internet Explorer 4 e superiores. Esta etiqueta proporciona um método único para a implementação de qualquer tipo de botão deformulário. Seus principais atributos são:

type= " tipo ", que pode tomar os já conhecidos valores submit (por padrão), reset ebutton.

name= " nome ", que atribui um nome identificador único ao botão.

value= " texto ", que define o texto que vai aparecer no botão.

A principal vantagem que traz estas etiquetas é que agora vamos poder introduzir dentro delasqualquer 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>três</td> <td>quatro</td> </tr> </table> </button> </form>

Informe de Luciano Moreno

Áudio em HTML I, introdução

Em sua curta, porém rápida vida, as páginas web passaram a ser não só uns meros documentostextuais aos que se podem acessar pela Internet, mas como umas verdadeiras apresentaçõesmultimídia, que combinam textos com imagens, áudios, vídeos e elementos de realidade virtual.

Se o primeiro passo que se deu foi adicionar imagens às páginas web (tanto estáticas comodinâmicas GIF animados), o seguinte passo consistiu em introduzir áudios nas mesmas,conseguindo com eles o apelativo de "multimídia". E nos referiremos daqui por diante quando

falarmos de áudio tanto sintetizado como verdadeiras gravações de áudio, de qualidade muitoelevada.

Entretanto, apesar dos navegadores terem sido capazes de interpretar os arquivos de áudioadequados desde já algumas versões, é verdade que a aplicação de áudios às páginas websempre esteve limitada pela largura de banda necessária nas conexões a Internet para poderbaixar de forma adequada tais arquivos, devido ao tamanho "excessivo" dos mesmos.

Outra das limitações importantes que encontramos na hora de incluir arquivos de áudio em nossaspáginas é a diferente implementação que fazem deles os navegadores web mais usados.Teoricamente, não só deveremos usar etiquetas HTML distintas para Internet Explorer que paraNetscape Navigator, como também que às vezes a própria forma de interpretar o áudio podediferir de um ao outro navegador.

Finalmente, há que destacar que na hora de incluir arquivos de áudio em nossas páginas devemosser conscientes que muitos dos formatos usados, sobretudo em gravações de qualidade, precisamum plugin ou programa especial para sua reprodução no navegador cliente. E se é verdade queatualmente há certos plugins que se transformaram quase que em um padrão na Internet (como ode Real Audio ou o de MP3), há outros possíveis que não é normal ter instalado, portanto seincluirmos arquivos deste tipo obrigaremos ao usuário a ter que instalá-los, coisa que as pessoascostuma ter resistência.


Áudio em HTML II, características do áudio digital

Vamos estudar alguns dos conceitos básicos do áudio digital, embora sem entrar em demasiadasconsiderações técnicas. Para aqueles que desejarem mais informação, existem uma infinidade deweb sites que estudam especificamente o áudio digital e o hardware necessário para sua capturae reprodução.

O áudio tem uma natureza ondulante, ou seja, se propaga em forma de ondas analógicas desde oobjeto que o produz. As características próprias de qualquer áudio (desde o produzido por umautomóvel até uma bela canção), seus diferentes tons e notas dependem precisamente daspropriedades físicas das ondas que o formam.

Para poder viajar desde o emissor ao receptor, as ondas de áudio precisam de um meio físico desuporte, seja o ar da atmosfera, a água, etc. Tanto é assim que no espaço exterior, onde não hámeio físico de suporte, não se podem transmitir áudios.

Se representarmos em um gráfico um áudio complexo, obteremos a seguinte figura:

Na qual podemos apreciar os diferentes valores de onda que vai tomando o áudio.

Todos nós sabemos que as máquinas informáticas não trabalham com dados analógicos, e sim,que trabalham com dados digitais formados por estados binários Portanto para representar um

que trabalham com dados digitais, formados por estados binários. Portanto, para representar umáudio, desde o ponto de vista informático, é preciso capturá-lo em uma natureza binária, paraque se faça uma amostra do mesmo, tomando determinados valores das ondas e representandotais valores em formato digital. Em cada captura obteremos um ponto do gráfico anterior.

Porém, quantas amostras deveremos tomar? Este é o verdadeiro miolo da questão, já quequantas mais amostras tomarmos, mais fiel será o áudio capturado com respeito ao original, como que terá mais qualidade.

Para medir o número de capturas utilizamos a freqüência da amostra. Como um Herz é um ciclopor segundo, a freqüência de uma captura em Herz representa o número de capturas querealizamos em um segundo. Assim, uma frequência de amostra de 20 KHz (20 Kilo Herz = 20000Herz) realizará 20000 capturas de pontos cada segundo.

O ouvido humano é captar de captar a assombrosa quantidade de 44000 áudios por segundo, ouseja, 44 KHz. Portanto, para que um áudio digital tenha suficiente qualidade deverá estar baseadoem uma frequência similar a esta. Em geral, o valor padrão de captura de áudios de qualidade éde 44,1 Khz (qualidade CD), embora haja capturadoras de áudio profissionais que chegam até os100 Khz, com objeto de obter um maior número de pontos sobre a amostra, conseguindo umaqualidade máxima.

Outro conceito do que já devem ter ouvido falar sobre o áudio digital é o número de bits de umcartão de áudio. A origem desta magnitude é que, na hora de capturar o áudio, não só éimportante o número de amostras tomadas, como também a quantidade de informação capturadaem cada uma dessas amostras.

Uma vez capturado o áudio, para sua posterior reprodução em uma máquina informática énecessário mandar uma série de impulsos ou posições aos alto-falantes para que criem o áudio apartir deles. Como? Bom, produzindo a partir dessas posições movimentos das membranas dosalto-falantes, movimentos que transformam de novo o áudio digital em analógico, estado no qualé capaz de viajar pelo ar e produzir os estímulos necessários em nossos tímpanos, com o qualsomos capazes de perceber o áudio "original". Quantas mais posições de informação se enviemaos alto-falantes, melhor a qualidade terá o áudio reproduzido.

Com estas bases, se define o número de bits de um áudio digital como o número de impulsos deinformação (posições) que se enviam aos alto-falantes para sua transformação em ondasanalógicas.

Os cartões de áudio atuais trabalham normalmente com 8 bits de informação, com os que sepodem obter 28=256 posições (zeros e uns binários), embora haja algumas de melhor qualidadeque são capazes de trabalhar com capturas de 16 bits, que originam 216 = 65536 posições deinformação.

Como dado de referência, os CDs atuais estão baseados em áudio gravado a 44 Khz e com umtamanho de amostra de 16 bits. Estas medidas se conhecem com o nome de áudio de qualidadeCD.

Por último, uma vez que o áudio digital chega aos nossos ouvidos, impactam contra os tímpanos,verdadeiras membranas especializadas que voltam a transformar as ondas analógicas em impulsoselétricos, que viajam até nosso cérebro, onde são interpretados e produzem as sensaçõesauditivas que todos nós conhecemos.

Uma exceção ao áudio anteriormente descrito, que podemos denominar "de dados de áudio", é oáudio sintetizado, o qual não se realiza nenhuma captura de ondas sonoras reais, e sim que éáudio totalmente digital, gerado diretamente na máquina informática pelo reprodutor digital

conhecido pelo nome de MIDI (Music Instrument Digital Interface). Quando se deseja reproduziruma nota musical concreta, se envia um comando MIDI ao chip sintetizador, que se encarrega detraduzir esse comando em uma vibração especial que produz a nota. Mediante este sistema épossível criar melodias bastante aceitáveis, embora nunca tenham a qualidade, nem a riqueza deuma onda sonora natural capturada.


Áudio em HTML (III)

Formatos de áudio

Na hora de incluir arquivos de áudios em nossas páginas web devemos distinguir entre os quepodem ser diretamente executados pelo navegador e aqueles que devem ser abertos por umprograma próprio, que deverá ter o usuário instalado em sua máquina para poder reproduzir oarquivo.

De forma geral, podemos incluir na web os seguintes tipos de arquivos de áudio.

WAV (Wave form Audio File format): formato típico da casa Windows, de elevadaqualidade, usado nas gravações de CDs, que trabalha a 44 Khz e a 16 bits. Constabasicamente de três blocos: o de identificação, o que especifica os parâmetros do formatoe o que contém as amostras. Seu principal inconveniente é o elevado peso dos arquivos,pelo qual seu uso fica limitado na Internet à reprodução de ruídos ou frases curtas. Aextensão destes arquivos é .wav. É suportado por Internet Explorer e Netscape 4x.

AU (Audio File format): formato criado pela casa Apple para plataformas MAC, cujosarquivos se salvam com a extensão .au

MIDI formato de tabela de ondas, que não salvam o áudio a reproduzir, e sim um códigoque nosso cartão de áudio terá que interpretar. Por isso, este tipo de arquivos não podearmazenar áudios reais, como vozes ou música gravada; só pode conter áudiosarmazenáveis em tabelas de ondas. Como contrapartida, os arquivos MIDI, que se salvamcom extensão .mid, são 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), obtém umaalta compressão do áudio e uma muito boa qualidade na eliminação dos componentes doáudio que não estejam entre 20 hz e 16 Kh (os que pode ouvir o ser humano normal).Tenha em cota o áudio envolvente (surround) e a extensão multilingüe, e salve os arquivoscom a extensão .mp3, e permite configurar o nível de compreensão, conseguindo-sequalidade similares às do formato WAVE, porém com até 10 vezes menos tamanho dearquivo. É suportado diretamente somente pelo Internet Explorer 5.5 e superiores.

MOD espécie de mistura entre o formato MIDI e o formato WAV, já que por um ladoarmazena o áudio em forma de instruções para o cartão de áudio, porém por outro podearmazenar também áudios de instrumentos musicais digitalizados, podendo ser interpretadospor qualquer cartão de áudio de 8 bits. Não é um formato padrão de Windows, por isso seuuso é mais indicado para sistemas Mac, Amiga ou Linux. A extensão dos arquivos é .mod

µ-Law Format de qualidade similar ao formato WAV, é original das máquinas NeXt, e salvaseus arquivos com a extensão .au

Real Audio de qualidade média, embora permita arquivos muito comprimidos, que salva comextensão .rmp ou .ra. Para sua reprodução necessita-se ter instalado o plugin Real Audio.

Na hora de trabalhar com estes formatos de áudio, deveremos ter em conta as limitações em seuuso, já que muitos deles não podem ser reduzidos mais que em sistemas operacionais concretos,e ainda assim, com plugins ou programas específicos.

Em busca da compatibilidade, se usamos Windows como sistema operacional convém usar paraarquivos musicais a reproduzir diretamente no navegador os formatos WAV e MIDI, que são osmais compatíveis.

Em troca, se o que desejamos é poder oferecer a nossos visitantes a opção de navegar commúsica executável através de um programa externo, o melhor é usar arquivos em formato MP3, jáque na atualidade a maioria dos navegantes têm instalado em sua máquina algum programareprodutor adequado, podendo valer desde software incluído em Windows, como Windows MediaPlayer, até aplicações externas, como Winamp. Neste caso, basta colocar um link normal emnossas páginas, apontando ao arquivo de áudio.

Como exemplo, se quisermos linkar em nossa página um arquivo MP3, bastaria escrever:

<a href="audios/mp3.mp3" target="_blank"> Clique aqui para ouvir a música. </a>

Que nos daria:

Clique aqui para ouvir a música

Com isto, o usuário ao clicar o link, se lançará a aplicação que tiver associada com o tipo dearquivo MP3, que dependerá da configuração interna de cada navegador e usuário.

Um caso especial é Netscape 6x. Quase não admite diretamente nenhum tipo de formato de áudioincrustado na página, ao não vir configuradas por padrão as aplicações ou plugins necessários. Eno caso de arquivos linkados, Nestscape 6x costuma lançar seu próprio reprodutor, que costumaser da casa AOL, precisando para a execução uma série de passos para se inscrever nessacompanhia como usuário do software.

Resumindo: cada usuário terá configurada sua máquina de forma particular, costumandoprevalecer o último software de áudio instalado, já que estes programas costumam se apropriarde certos tipos de arquivos para sua execução automática. Entre as aplicações possíveis deexecução de arquivos de áudio, seja de forma direta ou em forma de plugins para osnavegadores, 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 página web.Logicamente, para que um arquivo de áudio possa ser reproduzido por um navegador é necessárioque sua máquina tenha incluído um cartão de áudio e um par de alto-falantes.

Existem diversas formas de incluir um arquivo de áudio em uma página, formas que dependem dotipo 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 página web, áudios que se executamautomaticamente ao carregar página. É uma etiqueta proprietária de Microsoft, por isso só éinterpretada por Internet Explorer, admitindo os formatos de áudio MID e WAV, emborageralmente também aceita AU e MP3, em versões atuais do navegador ou mediante plugins deuso 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 rotapode ser relativa ao nosso sistema de pastas local, absoluta com respeito ao sistema depastas do servidor web ou uma URL completa que localize o arquivo em Internet.

loop="l" determina o número de vexes (l) que se deve executar o arquivo de áudio. Sedermos o valor infinite, o arquivo se reproduzirá indefinidamente.

balance="b" determina o equilíbrio de áudio entre dois alto-falantes da máquina, ou seja,a potência 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 balanceequilibrado entre os dois alto-falantes.

volume="v" fixa o volume ao que se ouvirá o áudio, e seus valores podem variar entre -10,000 (mínimo) e 0 (máximo). Não é suportado pelas máquinas 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 é acessível em Internet Explorer mediante código JavaScript, podendomodificar em tempo real suas propriedades balance, loop, src, e volume, embora esta última sóseja acessível em plataformas PC. Para uma informação completa sobre todas as propriedades efuncionalidades desta etiqueta pode-se visitar a página 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 caráter geral, que se usa para a inclusão nas páginas web de todos aquelesarquivos alehios ao navegador e que necessitam portanto a execução de algum plugin para suainterpretação.

Paradoxalmente, Internet Explorer assumiu depois o uso desta etiqueta para a inclusão dearquivos de áudio, para chegar a interpretá-la melhor e ampliá-la com mais atributos epropriedades, de tal forma que a execução de áudio com embed é atualmente mais cômoda comeste navegador, ao incorporar a suíte de Microsoft seus próprios plugins para a interpretação dosdiferentes formatos de áudio. Em troca, se usamos Netscape Navigator nos encontraremos emmuitos casos com uma falha na reprodução ou com uma molesta mensagem de necessidade dealgum plugin especial (sobretudo nas versões 6x), o que nos obrigará a visitar a página de

algum plugin especial (sobretudo nas versões 6x), o que nos obrigará a visitar a página deNetscape para seu download e instalação, que muitas vezes não será efetiva.

Seja como for, há que indicar que esta etiqueta nos incluirá na página web um objeto especial,uma espécie de console de comando, denominada Crescendo, que consta de três botões,similares ao de qualquer reprodutor de áudio: um botão Play, para começar a reprodução (se nãoestiver estabelecido o automático), um botão Pause, para deter momentaneamente e um botãoStop, para deter definitivamente (posto a zero). Este console é diferente segundo o navegadorusado; no caso de Internet Explorer se mostra o típico console de Windows Media, cujo tamanhopodemos configurar, enquanto que em Netscape se mostra um console próprio, de tamanho fixodefinido.

A sintaxe geral da etiqueta embed é do tipo:

<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>

E no caso que nos ocupe, da inclusão de arquivos de áudio, os atributos podemos dividi-los emdois 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 depastas do servidor web ou uma URL completa que localize o arquivo em Internet.

loop="l/true/false", que determina o número de vezes que se deve executar o arquivo deáudio. Os valores admitidos são l (número inteiro de vezes), true (infinitas vezes) e false(só uma vez). Só é reconhecida por Netscape Navigator.

playcount="n", que define o número 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 queestamos usando, com o qual o navegador web pode executar o programa ou pluginadequado para a reprodução do arquivo. Pode ser audio/midi, audio/wav, etc.

autostart="true/false", que determina se o arquivo de áudio deve começar a sereproduzir por si só ao carregar a página ou se ao contrário, será preciso a atuação dousuário (ou de código de script) para que comece a audição.

pluginspage="URL", que estabelece, no caso de ser necessário um plugin especial parareproduzir o arquivo, a página web onde se pode baixar o mesmo. Só se ativa no caso deque o navegador não seja capaz de reproduzir o arquivo por si mesmo, e é suportadasomente por Netscape Navigator.

name="nome", que atribui um nome identificador (deve ser único na página) a umaetiqueta embed determinada, com objeto de ser acessada logo por linguagens de script.

volume="v", que determina o volume de reprodução de áudio, e que pode variar entre 0 e100. É suportada somente por Netscape Navigator, que no console mostra o valorestabelecido em seu indicador de volume, sendo seu valor padrão 50. No caso de InternetExplorer, o valor de volume por padrão é 50 em plataformas PC, e 75 em MAC, sendonecessário 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á visível (false) ou não (true). Esteé um aspecto polêmico, já que se ocultamos o console obrigamos ao usuário a ouvir nossoarquivo, sem possibilidade de deter nem de modificar o volume, e se o mostramos estaremosincrustando na tela um objeto que muitas vezes nos romperá o esquema de design de nossapágina. Resta determinar seu uso em cada caso concreto.

width="w", que determina a largura visível do console, em pixels. height="h", quedetermina a altura visível do console, em pixels. Estes atributos são também muitoimportante, no caso de que tenhamos estabelecido hidden= "false", já que de seu valor irádepender a correta visulazação do console. No caso de Internet Explorer, que mostra umlogo de Windows Media sobre os controles, o tamanho mínimo aceitável deve ser de140x100 pixels, já que senão o console sairá deformado em excesso ou recortado. E nocaso de Netscape Navigator, deveremos atribuir uns valores de 145x60 pixels, que é o queocupa o console; se colocarmos um tamanho menor, o console será recortado, perdendofuncionalidades, e se atribuímos um tamanho maior, aparecerão espaços cinzas ao redor doconsole, tornando o aspecto da página feio. Se não especificarmos estes atributos etampouco hidden, aparecerá na página somente os comandos do console, sem logotiposadicionados (Internet Explorer) ou o console recortado (Netscape Navigator).

align="top/bottom/center/baseline/left/right/ texttop/middle/absmiddle/absbotom", análogo ao da etiqueta IMG, define oalinhamento horizontal ou vertical do console com respeito aos elementos da página.

hspace="hs", que estabelece a separação horizontal, vspace="vs", que estabelece aseparação vertical, em pixels, entre o console e os elementos da página que a rodeiam.Análoga aos seus equivalentes da etiqueta IMG.

Estes são os atributos principais, embora possamos encontrar referências de outros admitidos,apesar de não costumarem ser operacionais na realidade, já que não funcionam de forma corretaou são específicos de Nestcape (como toda a série de atributos que configuram os controles doconsole).

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 visível (e audível) nesta outra janela.


Áudio em HTML (V)

A etiqueta OBJECT.

Com objeto de normalizar a inclusão de arquivos não nativos nos navegadores web se decidiusubstituir as diferentes etiquetas que realizavam este papel (APPLET, BGSOUND, EMBED, etc.), eque não pertenciam aos padrões web, por uma etiqueta geral, que fosse capaz de incrustar nonavegador todo tipo de arquivo. A etiqueta escolhida no padrão HTML 4.0 foi OBJECT, a qual sedotou de suficientes atributos e flexibilidade para poder realizar corretamente seu trabalho.Devido a isto a proposta foi usar a etiqueta object também para incluir arquivos de áudio de todo

Devido a isto, a proposta foi usar a etiqueta object também para incluir arquivos de áudio de todotipo nas páginas web.

Pois bem, a aceitação e implementação que a mesma teve varia segundo a do navegador em

particular, assim como em função do objeto a incrustar. Desta forma, Internet Explorer realizousua própria implementação da etiqueta object, incluindo nela referências a filtros e componentesActiveX específicos para os arquivos de áudio. Por seu lado, os navegadores Netscape nãosuportam corretamente esta etiqueta para arquivos deste tipo.

Restringindo-nos a Internet Explorer, a polêmica continua, já que em diferentes manuaisencontraremos diferentes formas de incrustar áudios mediante object, umas que funcionam bem,e outras que não. Por que acontece isto? Eu creio que porque Microsoft foi usando a etiquetaobject para implementar todo um grande conjunto de componentes próprios, que ademais foramse adaptando às diferentes versões de Internet Explorer.

Como regra geral, válida não só para incrustar arquivos de áudio, como também para outros tipos,a etiqueta object vai definir um objeto ou componente externo encarregado da reprodução doarquivo, que no caso de Internet Explorer costuma ser algum tipo de controle ActiveX. Medianteobject se instancia o objeto, se declara sua URL e suas principais propriedades gerais, e medianteum conjunto de etiquetas especiais, PARAM, se passam os valores que necessita para seu corretofuncionamento ou para sua configuração 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 referência a arquivos de áudio, são:

classid="identificador_objeto", que fixa a URL do objeto ou componente externonecessário para reproduzir o arquivo de áudio, e a implementação CLSID dos controlesActiveX necessários.

type="tipo_arquivo", atributo importante, que declara o tipo de arquivo de áudio queestamos usando.

width="w", que determina a largura visível do console, em pixels.

height="h", que determina a altura visível do console, em pixels.

align="top/bottom/center/baseline/left/right /texttop/middle/absmiddle/absbotom", análogo ao da etiqueta IMG, define oalinhamento horizontal ou vertical do console com respeito aos elementos da página.

hspace="hs", que estabelece a separação horizontal, vspace="vs", que estabelece aseparação vertical, em pixels, entre o console e os elementos da página que a rodeiam.Análoga aos seus equivalentes da etiqueta IMG.

autostart="true/false", que determina se o arquivo de áudio deve começar a sereproduzir por se só ao carregar a página ou se pelo contrário será preciso a atuação dousuário (ou de código de script) para que comece a audição.

standby="mensagem", que apresenta em tela uma mensagem ao usuário enquantocarrega o arquivo.

Quanto aos elementos, param os mais importantes são:

param name="FileName" value="rota_arquivo", determina a rota ou URL do arquivo deáudio a reproduzir. Não é necessário utilizar só arquivos WAV ou MID, podendo reproduzirtambém 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 começara reproduzir o áudio automaticamente ao carregar a página ou se pelo contrário serápreciso que o usuário clique o botão Play para isso.

Estes não são todos os atributos e parâmetros possíveis. Na verdade, quanto aos componentesMicrosoft, podemos encontrar uma infinidade de configurações possíveis, que vão nos permitirfixar muitos aspectos dos mesmos. Deixo a cada um a possibilidade de aprofundar no estudodaqueles componentes e propriedades que necessite, porém sabendo que com os elementosvistos acima temos mais que suficiente para apresentar um arquivo de áudio em nossa páginaweb.

xExemplo:

<object classid="CLSID:05589FA1-C356-11CE-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 páginas áudios de fundo ou iniciados pelousuário mediante interação com o console Crescendo, vamos ver agora como podemosimplementar áudio mediante o uso de uma das etiquetas mais polivalentes em HTML: a etiqueta A.

Efetivamente, os links são a base do hipertexto, base por sua vez da web, e dentro de seusmúltiples usos podemos considerar o link a arquivos de áudios. O arquivo linkado pode serinterpretado diretamente pelo navegador (por ser de reprodução direta ou por ter instalado oplugin adequado) ou pode ser executado por um programa independente que se abraautomaticamente (Winamp, Real Audio, etc.), sendo este o caso mais comum. Se o usuário nãodispõe do programa ou plugin adequado, se abrirá uma janela de download do arquivo, com o qualpoderá salvá-lo até dispor da aplicação necessária para sua reprodução.

A sintaxe geral neste caso será do tipo:

<a href="rota_arquivo">Mensagem</a>

Exemplo de arquivo MID:

<a href="../audios/watermark.mid">Música 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.


Declaração DOCTYPE em documentos HTML

Neste artigo nos centraremos na declaração DOCTYPE dos documentos HTML.

O W3C (World Wide Web Consortium: www.w3.org), encarregado da criação dos Standard webs,define que os arquivos HTML, XML, XHTML devem ter uma declaração de tipo DOCTYPE que devefazer referência a uma das três definições do tipo de documento que existem.

Esta declaração deve ser a primeira linha de nosso documento e é necessária para dizer aonavegador que versão de HTML é a que se usa na página. Se não se faz, o navegador processaráa página em modo Quirks (modo de compatibilidade) podendo não interpretar corretamente ocódigo da página.

A DTD (definição do tipo de documento) é a estrutura regulamentar, ou seja, os elementos eatributos que estão disponíveis para cada tipo de documento. Para HTML 4.01 (as versõesanteriores não são recomendáveis devido a que não são totalmente compatíveis com as Folhas deEstilo), existem 3 tipos de DTD:

1. HTML 4.01 transitório

O HTML 4 transitório inclui todos os elementos e qualidades de HTML 4 Strict, porém agregaqualidades "presentational", elementos desaprovados ou elementos obsoletos. Chama-seTransitional porque está pensado como transição 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 transitório para os documentos que utilizam Frames(molduras).


<!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 padrões(Standards compilam-se). Isto implicará que só possam se usar as etiquetas de HTML 4.01.Este é o modo recomendado pelo W3C, já que é compatível com o CSS e pode serinterpretado corretamente por todos os navegadores, tornando muito mais fácil o passo denossos documentos ao XHTML que muito possivelmente tenda a substituir ao HTML nospróximos anos.


<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\"\"http://www.w3.org/TR/html4/strict.dtd\">

Se quisermos saber se nossa página cumpre com o DTD definido podemos fazê-lo desdehttp://validator.w3.org/

Informe de Jose A. Molinae-mail: [email protected]

Atributo nofollow nos links

Deixaremos aqui uma pequena resenha sobre um atributo que está se convertendo em essencialnos links e que não tínhamos comentado em nosso manual de HTML, embora sim que vimos algoem nosso manual de posicionamento em buscadores.

Nofollow é um atributo dos links HTML (etiqueta <A>), que serve para definir ou marcar ocomportamento dos buscadores quando rastreiam nossa página web em busca de conteúdos paraindexá-los. Por padrão, quando um buscador visita uma página web vai percorrendo todos seuslinks e vai indexando seu conteúdo em seu banco de dados de páginas. Isto é algo que fazemautomática e periodicamente. Ocorre tanto com os links internos a outras páginas de nosso sitecomo com os links externos a outras páginas web. Os motores que percorrem as webs de link alink, se chamam aranhas.

Pois bem, nós podemos através do atributo rel="nofollow", dizer a um buscador que não continueindexando os conteúdos da página a qual leva um link em particular. Faríamos assim:

<a href="URL_DO_LINK" rel="nofollow">TEXTO_DO_LINK</a>

Um pouco de história sobre nofollow

Para completar estas notas teríamos que comentar que o atributo foi criado por iniciativa deGoogle e Blogger em 2005, como uma idéia para deter o spam de links em websites que permitemaos usuários a participação.

Uma prática comum das pessoas que pretendem divulgar uma página web é realizar comentáriosou participações em páginas web, nas que inserem links aos seus próprios sites. Isto se conhececomo spam de links, ou com o término de spamdexing.

Com o atributo rel="nofolow" pretende-se mitigar os efeitos desse tipo de spam nos sites comofóruns, blogs, ou qualquer página que permita a interação com a comunidade de visitantes.Algumas páginas como a Wikipedia o utilizam em todos os links externos.

Atualmente, o atributo ren=nofollow está sob patente, embora esteja liberada de royalties, o quequer dizer que se pode utilizar sem limitação e sem ter que pagar nada.

Como os buscadores interpretam o Nofollow

O atributo é tido em conta não só pelo motor de indexação (aranha) do buscador Google, comotambém por outras aranhas de buscadores tão 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 comonofollow, visitando aquela web que se linkou. O que ocorre realmente é que não tem em conta olink para atribuir ranking ou diretamente não o indexam.

Divulgação de webs e nofollow

Faltaria dizer que este atributo é bastante potente na hora de trabalhar com a divulgação de umapágina web, visto que altera diretamente o comportamento dos buscadores ao rastrear aspáginas, link a link.

Sendo assim, os SEO, divulgadores de páginas ou pessoas que trabalham no posicionamento embuscadores, têm muito em conta em suas técnicas para seu trabalho do dia. Existem diversastécnicas que utilizam este atributo para realizar promoção de webs, como a que explicamos noartigo Arriscada, mas excelente técnica SEO usando rel=nofollow, porém o uso mais importante éo que se comentou já neste artigo: colocá-lo aos links externos para não transferir ranking ouposicionamento desde nossa web a outras webs externas.

Outra técnica relacionada com nofollow, porém mais segura, para que não se indexe parte doconteúdo de nossa página, é o uso do arquivo robots.txt, que já comentamos anteriormente emCriarWeb.com.


Etiqueta Iframe

Os frames (frame em inglês significa moldura) são umas ferramentas que tiveram uma históriadilatada no desenvolvimento de páginas web com HTML. De ser uma etiqueta não padrão passoua ser suportada por todos os navegadores e fazer parte das especificações de HTML. Por outrolado, o frame sempre foi uma utilidade para fazer páginas web de uso como mínimo controvertido,visto que tem certas desvantagens que muitas vezes são mais importantes que a indubitávelpraticidade.

Em qualquer caso, em CriarWeb.com já falamos suficiente sobre a etiqueta Frame e tratamosamplamente suas vantagens e inconvenientes. Neste artigo iremos falar de uma etiqueta "irmã"que é atualmente muito mais usada, porque é mais útil e menos problemática que os própriosframes. Trata-se de iframe, uma tag incluída nas especificações de HTML 4.0.

Nota: iframe vem de inline frame, porém em português também se poderia chamar de framesflutuantes

Referências sobre a etiqueta frame:

Frames em HTML Vantagens e inconvenientes do uso de frames Frames - Explicação básica Frames sem bordes Frames - Atributos avançados Atualizar dois frames com um só link Frames - Uma página em cada moldura ...

Teoricamente iframe serve para criar um espaço dentro da página onde se pode incrustar outraweb. É um quadrado cujas dimensões o desenvolvedor deve especificar na própria etiquetaiframe, que tem associada uma página web que se carrega em tal espaço. Essa página web teráseus próprios conteúdos e estilos, independentes do contexto onde se está mostrando. Ademaisserá perfeitamente funcional: se tiver links se mostrarão nesse mesmo espaço e se tiver scriptsou aplicações dentro se executarão também de maneira autônoma no espaço reservado aoiframe.

Exemplos de uso de iframe

Iframe se utiliza em muitos contextos. Dentro de um iframe podemos mostrar conteúdos de outraspáginas, como se estivessem na nossa, como por exemplo:

Códigos de banner, que se invocam por meio de um iframe pedindo os dados do bannergeralmente a um servidor de banners que pode estar em outra rede.Visualizar conteúdos de terceiros, como blocos de notícias ou novidades que oferecem emoutras webs.Interfaces de usuário, em que certas atividades se realizam de forma autônoma e oprocessamento está em outra página web.

Uso de iframe frente a frame

Atualmente, a etiqueta iframe se utiliza mais que a etiqueta frame, porque não dá tantosproblemas como esta. A diferença principal está baseada em que a etiqueta iframe não necessitauma declaração dos espaços dos frames ou frameset, porque se incrusta no código HTML da

página. O iframe, portanto, não provoca problemas de navegação, como os que ocorrem com osframes normais se não se entra corretamente através do frameset.

Também, já que não existe o frameset nos iframes, não sofre os problemas do uso de frames,sobretudo na hora em que a página é indexada nos motores de busca.

Por dizer de alguma maneira, trabalhar com iframe ou frames flutuantes é tão simples como fazeruma tabela, que se codifica dentro da construção HTML, com seu espaço reservado dentro dapágina. Sendo assim, a única diferença com respeito a uma tabela é que o conteúdo do iframe seextrai de outra página web.

Construção da etiqueta iframe

Como dissemos, o iframe se coloca diretamente no código HTML, no lugar onde quisermos queapareça.

Coloca-se um código como este:

<iframe src="pagina_fonte.html" width=290 height=250>Texto para quando o navegador não conhece a etiquetaiframe</iframe>

Como se vê, os atributos principais de iframe são a página web que se mostrará no espaço e alargura e altura da moldura que reservemos para o frame flutuante.

Como se pode ver, a etiqueta iframe tem sua correspondente etiqueta de fechamento. Todo otexto que colocarmos entre a etiqueta de início e a de fechamento será texto alternativo, que sóse mostrará no caso em que o navegador do visitante não aceite a etiqueta iframe.

Todos os atributos de iframe

Estes seriam os atributos disponíveis para a etiqueta iframe:

src: Para indicar a página web que se mostrará no espaço 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 como target dos links, ou mediante javascript.

id: Para indicar o identificador do iframe, e poder nos referir a ele através de javascript.

frameborder: para definir se queremos ou não que haja uma borda no frame. Os valorespossíveis são 0 | 1. frameborder=0 indicaria que não queremos borda e frameborder=1 que simque queremos.

scrolling: indica se se quer que apareçam barras de deslocamento para ver os conteúdos doiframe completo, no caso em que não apareçam no espaço reservado para o iframe. Os valorespossíveis são: yes | no | auto. O valor "yes" é para que apareçam sempre as barras dedeslocamento ou barras de scroll, "no" serve para que não apareçam nunca e "auto" é para queapareçam só quando forem necessárias (é o valor padrão).

marginwidth: Para definir a margem à esquerda e direita que deve ter a página que vai dentro doiframe, com respeito à borda. Esta margem vai em pixels, porém prevalecerá a margem que possater atribuída a página web que mostremos no frame flutuante.

marginheight: o mesmo que marginwidth porém neste caso para o tamanho da margem pela

marginheight: o mesmo que marginwidth, porém neste caso para o tamanho da margem pelaparte 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=yesmarginwidth=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 declaração do DTD usado ao construir um documento HTML ou XHTML.

Entretanto, para ser um pouco mais restritos, devemos esclarecer que o Doctype é o próprio dedocumentos XML e SGML, e portanto, as linguagens HTML ou XHTML são uns simples herdeiros dealgo que já se vinha utilizando.

Temos que esclarecer também que DTD significa Definition Type Document e é uma declaraçãoem uma metalinguagem para definir outra linguagem. Dito de outra maneira, o DTD marca asregras para a definição de linguagens como o HTML. Podemos conhecer mais o que é um DTD noartigo do manual de XML de CriarWeb.com: DTD e XML Schema.

Assim, voltando atrás, poderíamos dizer que os documentos HTML ou XHTML estão escritos emuma linguagem e com o Doctype especificamos esta linguagem e a versão da mesma. Osnavegadores lerão esta declaração de doctype e interpretarão a página atendendo às regrasdefinidas nessa linguagem.

Nota: Para os navegadores é importante conhecer o doctype da página web, porque desse modopodem mostrar a página web com a versão exata da linguagem HTML ou XHTML com a que foiconstruída. Se não têm uma declaração de doctype, interpretarão a página no que se chama"quirks mode", um modo que procura maximizar a compatibilidade da página com versõesanteriores da linguagem HTML.

De modo que a utilização da etiqueta é necessária se desejamos cumprir um padrão de HTML ouXHTML, para especificar que versão ou linguagem utilizamos e que o browser identifique a páginaconforme tal padrão.

O DOCTYPE tem uma forma como segue:

<!DOCTYPE htmlPUBLIC "-//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 código HTML da página.

Por explicar de alguma maneira esta etiqueta, que parece meio complicada, diz que é umDOCTYPE de um documento HTML e nos dá dois dados adicionais. Com o texto "-//W3C//DTDXHTML 1.0 Transitional//EN" indicamos que este documento se tem que validar com aespecificação 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 validaro código HTML da página.

O tipo de documento, que havíamos assinalado como Transitional no doctype expressado antes,quer dizer que o documento utiliza um leque mais amplo de etiquetas HTML e atributos, inclusivel 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, temosstrict, que indica que o código é HTML ou XHTML estrito, sem incluir atributos e etiquetas emdesuso. O outro tipo de documento que falta é o frameset, que se utiliza quando estamosrealizando uma declaração de frames ou frameset.

Portanto, dependendo de nossa página e do código que utilizarmos, teremos que declarar um ououtro doctype. Existem diversos Doctype que abrangem uma grande gama de possibilidades,configurando distintas versões 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 algunsdestes doctype mais utilizados atualmente:

Doctype XHTML 1.0 strict

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Doctype XHTML 1.0 transitional

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Doctype XHTML 1.0 frameset

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Doctype HTML 4.01 strict

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

Doctype HTML 4.01 transitional

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

Doctype HTML 4.01 frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


Etiqueta META robots

Mediante as diferentes etiquetas META que podemos colocar em um website dispomos de umavariedade ampla de meta-informações para comunicar a qualquer sistema que leia nossa páginaweb. Neste artigo vamos apresentar uma etiqueta interessante para definir como se têm quecomportar os motores de busca na hora de visitar nossa página e mostrá-la entre os resultadosde buscas realizados no buscador. Trata-se da etiqueta meta de robots.

A etiqueta META de Robots serve para personalizar o comportamento de robots de indexação,tipo Google, na hora de processar nossa página web. Cada uma das páginas de nosso site podeter uma declaração da etiqueta meta de robots distinta, com o qual podemos inclusive definir demaneira independente como desejamos que se trate cada uma das páginas que compõe o web.

Em CriarWeb.com publicamos anteriormente informações sobre distintas etiquetas META emartigos.

Etiqueta ROBOTS de META Tags

Como dissemos, a etiqueta robots, dentro das possíveis etiquetas com Meta-informações sobreum documento web, serve para levar um controle exaustivo do que pode ou não pode fazer um

, p q p probot de indexação quando visita nosso website. Os comportamentos mais típicos que podemosdefinir são permitir ou não indexar uma página e seguir ou não seus links.

Nota: Convém recordar que também se pode definir o comportamento dos robots de busca comnosso site, na hora por exemplo de permitir ou não indexar as distintas páginas, mediante o arquivorobots.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 indexação ovalor é "robots".

Content: se indica as diretivas que queremos que apliquem os motores de indexação quandovisitam a página.

Valores possíveis da etiqueta META ROBOTS

No atributo Content da etiqueta meta devemos colocar as diretrizes que desejarmos parabuscadores, tantas como desejarmos, separadas por vírgulas. As distintas diretrizes a aplicar sãoas seguintes:

INDEX / NOINDEX Serve para indicar se se deseja ou não permitir a indexação da página pelos motores de busca.

FOLLOW / NOFOLLOW Com esta diretriz se indica se se deve ou não permitir aos motores de busca percorrer ou seguirpercorrendo a web através dos links que encontre no corpo do documento.

ARCHIVE / NOARCHIVE Isto permite dizer se desejamos ou não que o motor de busca arquive o conteúdo do website emseu cachê interno. Como pudemos ver, buscadores como Google têm um cache e podemos ver aspáginas web tal como as tem "cacheadas" o buscador. Para isso, nos resultados das buscasaparece um link que põe cache. Se dissemos que não arquive a página, não deveria mostrar esselink de cache. Isto na verdade, segundo Google, não evita que se salve em cache a página, e simque não permite vê-la aos usuários do buscador e portanto não mostra o link.

SNIPPET / NOSNIPPET Esta diretriz à princípio não resulta muito útil, pelo menos a primeira vista. Serve para que o motorde busca não mostre nenhuma descrição de um site, só seu título. Se utilizar NOSNIPPETautomaticamente define um NOARCHIVE, por isso que a página tampouco se mostrará em cache.

ODP / NOODP Serve para dizer ao buscador que deve, ou não, mostrar o título e descrição da página iguais aosque se encontra no Open Directory Project. Em alguns casos, alguns buscadores mostram comotítulo e descrição de uma web os que se publicaram no ODP (http://www.dmoz.org/).

YDIR / NOYDIR É basicamente o mesmo que ODP / NOODP, com a diferença que é para que não se possa, ou se,mostrar a descrição e título que aparece no diretório de Yahoo.

Quando não existe esta etiqueta os buscadores interpretam as condições mais favoráveis paraeles, ou seja, que podem fazer tudo o que costumam fazer com outras páginas a nossa, comoindexá-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 aspossibilidades dos motores de busca visto que as possibilidades por padrão são as menos

possibilidades dos motores de busca, visto que as possibilidades por padrão são as menosrestritivas.

Isto quer dizer que uma etiqueta como a seguinte é irrelevante, porque o buscador sempre vaiindexar a página e seguir seus links de maneira pré-determinada:

<META name="robots" content="INDEX,FOLLOW">

Podemos definir então casos mais restritivos como estes:

<META name="robots" content="INDEX,NOFOLLOW"> Para indicar que se deseja que se indexe a página, porém não se sigam os links. Dada que aopção INDEX é a que se subentende por padrão, esta etiqueta teria o mesmo valor que aseguinte:

<META name="robots" content="NOFOLLOW"> Para indicar que não queremos que se sigam os links da página.

<META name="robots" content="NOINDEX,NOFOLLOW"> Para indicar que não queremos que se indexe a página nem que se sigam os links que possaconter.

<META name="robots" content="NOARCHIVE"> O único que indicamos é que não se mostre o link para ver a página no cache do buscador.

<META name="robots" content="NOINDEX,NOFOLLOW,NOARCHIVE,NOODP,NOSNIPPET"> Com esta restritiva etiqueta forçamos para que não se indexe a página, não se sigam os links,não se mostre o link de cache, não se mostre o título e descrição do Open Directory Project e sóse mostre o título da página nos resultados das buscas.


O futuro do desenvolvimento web: HTML 5

No momento de escrever este artigo, a especificação de HTML 5 está ainda em fase de prova,não obstante, em alguns navegadores, recentemente estão se colocando em funcionamento, deforma experimental, algumas das características que trará consigo este novo padrão.Paralelamente, vão surgindo novas informações e referências que explicam o que é HTML 5, o quefaz com que nos sintamos cada vez mais impacientes por conhecer bem as novas particularidadesda linguagem e sobretudo, por começá-las a aplicar em nossos desenvolvimentos.

Este artículo de CriarWeb.com pretende oferecer algumas pistas para conhecer o caminho queatualmente está percorrendo a linguagem de marcação para se converter em uma realidade, eainda explicar um pouco quais são as novidades mais importantes que estão por vir.

Por que se cria HTML 5Aos que se dedicam a fazer páginas web sabem que um website é como um quebra-cabeça detecnologias que operam entre si. Para fazer uma página, à princípio , se necessita simplesmenteHTML, porém esta afirmação hoje tem pouco a ver com a realidade e com as necessidades dosdesenvolvedores para criar uma rica experiência de usuário.

É que hoje poucos websites se baseiam unicamente em HTML. Pode-se utilizar CSS para definir oaspecto da página, algum tipo de script do lado do cliente, em Javascript, vídeos em diversosformatos ou Flash para realizar alguma animação ou interação com o usuário. Para poder sebeneficiar e integrar todas estas tecnologias, existem uma infinidade de etiquetas que se foramcriando, segundo iam se necessitando, e as quais não passaram pelo filtro dos normalizadores detecnologias como o W3C.

Portanto mais de 10 anos depois que se publicasse a última especificação do HTML resulta

Portanto, mais de 10 anos depois que se publicasse a última especificação do HTML, resultaprimordial para o futuro da web a criação de um novo padrão que recolha e solucione de algumamaneira, as necessidades dos desenvolvedores que se foram criando ao longo de todo estetempo.

Esforços em diversas vertentes para a criação de HTML 5Sem dúvida já faz tempo que se necessitava esta nova especificação, que hoje ainda está emfase de prova e poderíamos nos perguntar: Por que se passou tanto tempo sem se publicar estanova versão da linguagem? A resposta é que HTML 5 se converteu em um projeto muitoambicioso, onde há muitas pessoas, empresas e instituições que têm muito que opinar. É de vitalimportância, portanto, coordenar a todos os implicados para criar um único ponto comum, queassegure esta vez um êxito da tecnologia como um padrão.

À princípio, os encarregados de regular os padrões da Internet são os integrantes do W3C, queestiveram trabalhando durante bastante tempo em outras linguagens como XML. Não se podedizer que deixaram de lado HTML, porém de alguma maneira estavam criando outros padrões maisrígidos que substituíssem a linguagem. Diante dessa falta de interesse em HTML e asnecessidades reais dos desenvolvedores de webs por parte do W3C, se criou em 2004 umacomunidade de pessoas interessadas em melhorar e modernizar a linguagem de marcação. Estenovo grupo, chamado WHATWG (Web Hypertext Application Technology Working Group), se crioua raiz de uma conferência do W3C com pessoas integrantes das equipes de desenvolvimento deApple, a Fundação Mozilla e Opera, ao que se foram agregando pessoal de Microsoft e outrasempresas implicadas no mundo web.

O WHATWG, que funciona de maneira independente do W3C, tem como objetivo principaltrabalhar na nova especificação do HTML 5 e a eles devemos muitos dos avances que estão porchegar com relação à linguagem. É uma organização aberta, onde qualquer um pode participarlivre e gratuitamente. De fato, segundo comentam em sua web, estão realmente interessados nasopiniões e interesses das pessoas que trabalham com o desenvolvimento web, para criar umasespecificações que respondam às necessidades reais dos profissionais da Internet.

Links relacionadosPara a documentação dos leitores, publicamos os links às provas de especificações do HTML 5 eas organizações que trabalham nelas:

W3C HTML Working Group: http://www.w3.org/html/

WHATWG http://www.whatwg.org

Última versão publicada das especificações de HTML 5 http://www.w3.org/TR/html5/

Especificações do HTML 5 pela WHATWG http://www.whatwg.org/specs/web-apps/current-work/multipage/

ConclusãoPudemos comprovar que existem numerosos esforços para a criação das novas especificações doHTML 5, realizados por distintas organizações, independentes, porém que trabalham em umafrente comum.

No próximo artigo veremos, quando estará pronto e quais são 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 razões pelas quais é verdadeiramente importante esta nova versão da linguagem demarcação HTML e vimos quem são os que estão realizando sua especificação.

Agora nos convêm explicar o que é exatamente HTML 5, já que não é simplesmente uma novaversão da linguagem de marcação HTML, e sim um agrupamento de diversas especificaçõesconcernentes ao desenvolvimento web. Ou seja, HTML 5 não se limita só a criar novas etiquetas,atributos e eliminar aquelas marcas que estão em desuso ou se utilizam inadequadamente, e simque vai muito mais além.

Sendo assim, HTML 5 é uma nova versão de diversas especificações, entre as que se encontram:

HTML 4XHTML 1DOM Nível 2 (DOM = Document Objetc Model)

HTML 5 pretende proporcionar uma plataforma com a que desenvolver aplicações web maisparecidas às aplicações de área de trabalho, onde sua execução dentro de um navegador nãoimplique falta de recursos ou facilidades para resolver as necessidades reais dos desenvolvedores.Para isso se estão criando umas APIs que permitam trabalhar com qualquer dos elementos dapágina e realizar ações que até hoje era necessário realizar por meio de tecnologias acessórias.

Estas API, que terão que ser implementadas pelos distintos navegadores do mercado, se estãodocumentando detalhadamente, para que todos os Browsers, criados por qualquer companhia assuportem tal qual se desenharam. Isto se faz com a intenção que não ocorra o que vemacontecendo no passado, que cada navegador faz a guerra por sua parte e os que acabampagando-o são os desenvolvedores e os usuários, que têm muitas possibilidades de acessar awebs que não são compatíveis com seu navegador preferido.

Quando estará pronto HTML 5Segundo informam na página da organização WHATWG, HTML 5 prevê que esteja pronto comoespecificação de implementação recomendada em 2012. Isto que dizer que vamos ter que esperaraté 2012 para aproveitar as vantagens de HTML 5? Realmente não é justamente assim, visto quealguns navegadores já implementam muitas das características da moderna linguagem.

É que HTML 5 está formado por muitos módulos distintos, cujo grau de especificação está emníveis desiguais. Portanto, muitas das características de HTML 5 estão já prontas para serimplementadas, em um ponto de desenvolvimento que se encontra próximo ao que finalmente seráapresentado. Outras muitas características estão ainda simplesmente de molho, a modo de idéiasou rascunhos iniciais.

De fato, as versões mais novas de quase todos os navegadores, incluído o polêmico InternetExplorer 8, implementam algumas das características de HTML 5. Claro que, para que uma web seveja bem em todos os sistemas, há que utilizar só aquelas partes que funcionam em todos osnavegadores, por isso que ao dia de hoje, poucas são as utilidades realmente disponíveis dalinguagem, se queremos fazer um website compatível. Não obstante, no pior dos casos, podemoscomeçar a usar a nível experimental estas características, mesmo que só seja para esfregarmosas mãos em espera de incorporá-las realmente em nossas práticas de desenvolvimento habituais.

Quais são as novidades de HTML 5HTML 5 inclui novidades significativas em diversos âmbitos. Como dizíamos, não só se trata deincorporar novas etiquetas ou eliminar outras, e sim que se supõe 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 têm um formato comum, formado por elementoscomo cabeçalho pé navegadores etc HTML 5 permite agrupar todas estas partes de uma

como cabeçalho, pé, navegadores, etc. HTML 5 permite agrupar todas estas partes de umaweb em novas etiquetas que representarão cada uma das partes típicas de uma página.Etiquetas para conteúdo específico: Até agora se utilizava uma única etiqueta paraincorporar diversos tipos de conteúdo enriquecido, como animações Flash ou vídeo. Agorase utilizarão etiquetas específicas para cada tipo de conteúdo em particular, como áudio,

vídeo, etc.Canvas: é um novo componente que permitirá desenhar, por meio das funções de um API,na página todo tipo de formas, que poderão estar animadas e responder a interação dousuário. É algo assim como as possibilidades que nos oferece Flash, porém dentro daespecificação do HTML e sem a necessidade de ter instalado nenhum plugin.Bancos de dados locais: o navegador permitirá o uso de um banco de dados local, com aque se poderá trabalhar em uma página web por meio do cliente e através de um API. Éalgo assim como as Cookies, porém pensadas para armazenadas grandes quantidades deinformação, o que permitirá a criação de aplicações web que funcionem sem necessidadesde estar conectados a Internet.Web Workers: são processos que requerem bastante tempo de processamento por partedo navegador, porém que se poderão realizar em um segundo plano, para que o usuário nãotenha que esperar que se terminem para começar a usar a página. Para isso, se dispõetambém de um API para o trabalho com os Web Workers.Aplicações web Offline: Existirá outro API para o trabalho com aplicações web, que sepoderão desenvolver de modo que funcionem também em local e sem estar conectados aInternet.Geolocalização: As páginas web se poderão localizar geograficamente por meio de um APIque permita a Geolocalização.Novas APIs para interface de usuário: temas tão utilizados como o "drag & drop"(arrastar e soltar) nas interfaces de usuário dos programas convencionais, serãoincorporadas ao HTML 5 por meio de um API.Fim das etiquetas de apresentação: todas as etiquetas que têm a ver com aapresentação do documento, ou seja, que modificam estilos da página, serão eliminadas. Aresponsabilidade de definir o aspecto de uma web correrá a cargo unicamente de CSS.

Como se pode ver, existirão vários API com os quais poderemos trabalhar para o desenvolvimentode todo tipo de aplicações complexas, que funcionarão on-line e off-line. Talvez se entendamelhor por que HTML 5 é um projeto tão ambicioso e que está levando tanto tempo para serelaborado.


Introdução ao HTML5 e Internet Explorer 9

HTML5 é uma nova especificação que atualmente se encontra em fase de versão de testes (W3CWorking Draft 19 October 2010) e que unifica dois elementos tecnológicos. HTML5 é a evolução,por um lado do que tem sido até agora a linguagem de marcação HTML4, e por outro lado da APIDocument Object Model 2 (DOM2). Antes de começar a ver a sintaxe da linguagem, temos quedeixar muito claro que HTML não vai ficar somente em uma simples redefinição de etiquetas demarcação senão que vai muito mais além.

Através do HTML5 vamos dispor de novas API's que vão tentar ajudar os desenvolvedores a geraraplicações web muito mais dinâmicas e ricas, tendo sempre claro o ponto de vista de que amaioria dessas interfaces de programação se encontram em fase de teste e por isso podemosafirmar que não estão maduras para implementação em grandes projetos ou aplicações por partedas organizações.

Historia do HTML 5Desde que a IBM começou a utilizar sua linguagem GML até o momento atual em que nosencontramos foram muitas as mudanças tecnológicas que se produziram. Com a chegada dalinguagem GML transformando-se em standard formal em 1986 (Standard Generalized Markup

g g ( pLanguage) a IBM proporcionou uma linguagem que definia como deviam ser as linguagens demarcação porém, não especificava como tinham que ser as etiquetas. A partir do SGML começa ase 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 seencontram atualmente implementadas1997: HTML 3.2 durante muito tempo ignorado pelas empresas que provêem navegadores,as quais implementam suas próprias etiquetas1998: Pressionadas pela adoção dos standards web, se confere peso às recomendações doW3C e se promovem navegadores com base em tais padrões1999: Estabiliza se a sintaxe e a estrutura do HTML 4.0, convertendo-se no standard paraa web2000: Nasce o XHTML 1.0 desenhado para adaptar o HTML ao XML. Uso de DTD pararenderizar como HTML2000-2004: O incremento das conexões na banda larga é alto, produzindo-se uma demandano campo do desenvolvimento das aplicações e da multimídia, onde tecnologias como Flashe Ajax fazem com que se trabalhe na especificação XHTML 2.02004: Não satisfeitos com a direção de XHTML, Apple, Mozilla e Opera propõem evoluir opadrão HTML 4.0. Embora rejeitados, formam o WHATWG (Web Hypertext ApplicationTechnology Working Group)2005: Publica-se a versão de testes de trabalho Web Applications 1.02007: O W3C adota o trabalho de WHATWG em um novo capítulo, publicando o que seria aversão de testes de trabalho de HTML 52009: Última chamada expedido para o projeto de trabalho de HTML 5. O W3C não renovaXTML 2.02010: Versão do W3C para HTML5

Está previsto que o HTML5 alcance a condição de candidato em 2012, finalize os testes finais em2020, e alcance a categoria de recomendação de pleno direito em 2022.

Imagem 1: Evolução da linguagem de marcação HTML

No artigo seguinte veremos as principais mudanças que incorpora o HTML5.

Informe de Alejandro Martín Bailón-Tradução CRV

Começando com HTML 5

Neste segundo artigo do manual de HTML5 e Internet Explorer 9 começamos a analisardetidamente o que é HTML5.

Aviso aos navegantes: Nem tudo é HTML 5

Voltamos a transmitir a ideia de que tudo aquilo proporcionado pela versão de testes de HTML5não é só linguagem HTML já que, à parte de dispor de novas etiquetas, também vamos dispor denovas API's de desenvolvimento. Isto implica que devemos ter muito cuidado no desenvolvimentode nossas aplicações web já que o consórcio WHATWG propõe novas API's, novos elementos,

etc. que podem ser descartados pelo W3C e vice-versa. Um exemplo do comentado é o uso daAPI armazenamento web SQL proporcionada com HTML5. Devido às limitações existentes noarmazenamento web (todos sabemos o limitado que são as cookies quanto à capacidade dearmazenamento com apenas 4 Kb), HTML5 propôs o uso da API de armazenamento web SQL locale por isso alguns fabricantes de navegadores (não todos, graças a deus) proporcionaram suporteà tal API. O resultado final do desenvolvimento desta API por parte do W3C foi suadescontinuidade. Vocês podem imaginar a cara dos chefes de projeto que quiseram inovar(digamos assim) desenvolvendo uma aplicação web com armazenamento web SQL.

Outro exemplo expoente do indicado também pode ser a API Web Socket e todos os problemas desegurança associados a ela, o que ocasionou que navegadores tão conhecidos como Opera ouFirefox, que tinham dado suporte a tal interface de desenvolvimento, tenham tido que dar marchaatrás e eliminar o suporte de seus navegadores. Este tipo de acontecimentos não estãoacontecendo com Internet Explorer de Microsoft já que só se estão implementando aquelas API'sque se encontrem em uma fase de desenvolvimento estável e madura.

Começando com HTML5A continuação, vamos indicar as principais mudanças que incorpora HTML5:

Declaração de tipo de documento Um dos elementos mais óbvios, e dos primeiros que temos que assimilar, é que Internet Explorer 9não entende um documento HTML5 a não ser que se especifique a declaração de tipo dedocumento. À diferença da especificação anterior onde dispúnhamos de três declarações de tipode 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 etiquetaspara 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 amaquetação das páginas.

Graças a estas novas etiquetas podemos estabelecer a estrutura de conteúdo para as zonas ouoselementos mais habituais que se costumam encontrar em um website, como podem sercabeçalhos, pés de página, menus de navegação, conteúdos relacionados, etc. para mais adianteaplicar estilos visuais mediante folhas de estilos CSS3.

Outras etiquetas HTML5 também inclui novas etiquetas para identificar dados de tipo data, valores que expressemimportes ou quantidades numéricas ou a realização de ênfase em palavras ou textos que a exijam,assim como de etiquetas para realizar publicação e manejo de dados.

Os formulários HTML foram melhorados com uma redefinição de novos tipos de elementos para aetiqueta input, eliminando a sequidão ou a falta de tipos de dados que existiam para osformulários em HTML 4. Também foram incorporados à linguagem novos atributos para oselementos de formulário que serão uma delícia para os webdesigners.

Etiquetas não suportadas Temos de ter em conta, para futuros desenvolvimentos ou desenhos a serem realizados sobreentornos web, que HTML5 abandonou algumas etiquetas, ou porque perderam seu significado, ouentão porque sua funcionalidade foi coberta por outras etiquetas diferentes.

No próximo artigo vamos ver um exemplo de estrutura e como implementar estilos CSS3.

Informe de Alejandro Martín Bailón-Tradução CRV

Todos os direitos de reprodução e difusão reservados

Voltar

Documents

Manual de HTML - Manual Completo