Introdução ao Desenvolvimento com Padrões Web: XHTML Essencial

Introdução ao Desenvolvimento com Padrões WebXHTML Essencial

Muito tem se falado em frameworks para desenvolvimento web, Tableless, AJAX, Facelets, RichFaces, etc, etc. Mas afinal, será que usar todo esse aparato tecnológico nos garante ter sistemas web de qualidade, acessíveis e usáveis? Por que é tão difícil deixar uma tela com visual idêntico no Mozilla Firefox e no Internet Explorer (e no Opera, Safari, Konqueror, além das versões mobile)? No que nosso desenvolvimento com esta tecnologia ainda pode melhorar? E afinal, o que vêm a ser padrões web?

Esclarecer um pouco a algumas destas questões para que você conheça o essencial dos detalhes do desenvolvimento web é o objetivo deste tutorial. Com esta apostila, certamente você irá gostar tanto dos padrões web quanto esse nosso amigo aí do lado. :-P Tudo para os padrões web não

saírem de sua cabeça!

Breve histórico.

Aplicações web ricas, páginas dinâmicas, animações, sites para se assistir a vídeos, ouvir música em rádios on-line, elementos de interatividade... Todas essas coisas comuns na Internet que conhecemos hoje estavam muito longe da realidade nos primórdios das redes de computadores. Interessante lembrar que isso tudo chegou a nós evoluindo num espaço de menos de vinte anos. Como curiosidade, a primeira página web colocada oficialmente na Internet em 7 de agosto de 1991 foi a homepage do Conselho Europeu para Pesquisa Nuclear (CERN, da sigla em francês) em e consistia em apenas um único arquivo HTML.

Pois bem. Assim que começou a sair dos ciclos militar e acadêmico, a Internet era essencialmente um pequeno conjunto de documentos de texto interligados entre si e mantendo alguma correlação – documentos de hipertexto, como são chamados. De acordo com o projeto da World Wide Web de Tim Berners-Lee, a linguagem de marcação HTML foi definida para geração de documentos de hipertexto. Todos os documentos basicamente consistiam em um fundo branco contendo texto, possivelmente com alguns links para outros documentos. A estrutura dos documentos de hipertexto era a única preocupação.

O ambiente web, baseado no modelo cliente-servidor, utilizava (e ainda utiliza) o protocolo de transferência de hipertexto, HTTP, para comunicação e envio destes documentos de um servidor web a um cliente, também chamado navegador web ou ainda, browser.Em meados da década de 1990, a Internet se desenvolve e passa a ser usada comercialmente, por empresas e corporações interessadas em divulgar sua marca, produtos e serviços. Com essa motivação, o padrão para a linguagem HTML passou a incorporar marcações que permitiam inserir elementos não relacionadas à estrutura do conteúdo. Foi o caso das marcações para mudar o estilo e tamanho das fontes, inserção de imagens e formatações como negrito, itálico e sublinhado e miniaplicativos Java Applets, por exemplo (respectivamente, <font>, <img>, <b>, <i>, <u> e <applet>).

Além disso, as empresas que desenvolviam os navegadores web mais populares então (depois da era do Mosaic) – a Netscape com seu Netscape Navigator, e a Microsoft com o Internet Explorer – travaram uma disputa que ficou conhecida como a “Guerra dos Browsers": cada uma, por conta própria, começou a criar marcações HTML próprias, só reconhecidas por seus próprios produtos (e que não funcionavam no navegador concorrente) na tentativa de abarcar mais usuários para si. Como o parser HTML de cada navegador simplesmente ignorava marcações que não reconhecia, ter um site visualizado adequadamente nos dois produtos era uma ingrata tarefa.

Para tentar padronizar o conjunto de marcações HTML (e outros aspectos relacionados à web), o próprio Tim Berners-Lee cria, em 1994, com um conglomerado de empresas (http://www.w3.org/Consortium/Member/List), o Word Wide Web Consortium, W3C (http://www.w3.org/Consortium); sendo o organismo que rege todos os padrões web existentes.

Deste passado recente até hoje, muita coisa aconteceu, ao menos pelo lado da Netscape: o Navigator deixou de ser o navegador hegemônico (http://en.wikipedia.org/wiki/Usage_share_of_web_browsers#1998_and_earlier) e parou de ser produzido oficialmente em 28 de dezembro de 2007. A empresa Netscape quase faliu e foi adquirida pela America OnLine. O código-fonte do navegador foi doado à comunidade (através da então recém criada Fundação Mozilla), reescrito e melhorado, dando origem inicialmente a um novo navegador chamado Mozilla e, pouco depois, a uma versão mais leve chamada Mozilla Firefox, prestes a ter sua versão 3 lançada.

Pelo lado do Internet Explorer, desde o declínio da Netscape o navegador da Microsoft usufrui de sua cômoda supremacia no mercado. Talvez por isso tenha tido relativamente poucas evoluções desde o final do século XX. As versões da série 4.x, 5.x e 5.5.x tiveram cerca de três anos no mercado praticamente sem melhorias significativas.

O Padrão XHTMLDurante a “Guerra dos Browsers", na tentativa de se conseguir layouts com colunas de textos e imagens minimamente semelhante nos navegadores mais populares, era comum se utilizarem elementos de tabelas do próprio HTML como espécies de linhas guia para alinhar conteúdos.

Com a “Guerra dos Browsers", era muito comum se encontrar sites com dois botões, com os logos do Internet Explorer e Netscape Navigator. Como nenhum dos dois prevalecia (o Netscape era mais popular na Europa e o Internet Explorer na América), com o tempo as empresas perceberam que tal competição na verdade acabava dividindo o mercado. As empresas então perceberam a necessidade de adequação aos padrões web. E de fato, com o fim de tal “Guerra", os navegadores se aprimoraram muito com relação aos padrões web definidos pelo W3C. Apesar de ainda haver algumas discordâncias, o grau de aderência aos padrões dos navegadores modernos (grosso modo, IE e NN de versões superiores a 4) é em geral muito satisfatório.

Apesar da grande melhoria no suporte aos padrões, os navegadores ainda se comportavam errônea e discrepantemente para o caso de códigos HTML fora dos padrões, ou feitos incorretamente ou mal-formados – que aliás, eram muito comuns devido a grande popularização da web desde o estouro da bolha da Internet. Os padrões ditavam como o navegador deveria se comportar ao segui-los, mas os resultados poderiam ser inesperados em caso de problemas com o código HTML. Os navegadores acabavam fazendo um “melhor esforço" para tentar exibir código HTML incorreto ou despadronizado, mas não havia nenhuma garantia.

Para garantir este melhor esforço, os navegadores flexibilizam ao máximo suas engines de renderização e passam a operam no chamado “Quirks Mode", uma espécie de modo de compatibilidade em que os navegadores funcionam tal como eram suas versões antiquadas, da época da Guerra dos Browsers. Ou seja, se seu código HTML for ruim, sua página será exibida tal como o seria num Internet Explorer 2 ou Netscape Navigator 3 – e tão difícil de manter e

garantir a aparência visualização quanto.

Como exemplo, de acordo com o padrão HTML, um parágrafo deve possuir as tags de abertura (<p>) e fechamento (</p>). Assim:

<p>Ouviram do Ipiranga as margens plácidas de um povo heróico o brado retumbante.</p><p>E o sol da liberdade em raios fúlgidos brilho no céu da pátria neste instante.</p>

Ouviram do Ipiranga as margens plácidas de um povo heróico o brado retumbante.

E o sol da liberdade em raios fúlgidos brilhou no céu da pátria neste instante.

Trecho de código HTML bem formado Renderização

Mas se alguém esquecesse a tags de fechamento e gerasse um documento HTML mal-formado como abaixo?

<p>Ouviram do Ipiranga as margens plácidas de um povo heróico o brado retumbante.<p>E o sol da liberdade em raios fúlgidos brilho no céu da pátria neste instante.

Ouviram do Ipiranga as margens plácidas de um povo heróico o brado retumbante.

E o sol da liberdade em raios fúlgidos brilhou no céu da pátria neste instante.

Trecho de código HTML bem formado Renderização

O resultado seria o mesmo! Para não frustrar a grande quantidade de usuários da web que poderiam ter gerado códigos desta forma, os navegadores acabavam renderizando tal código incorreto da mesma forma que o de acordo com os padrões. Entretanto, as possibilidades são infinitas e as decisões de como renderizar código incorreto ficavam a cargo de cada desenvolvedor.

Então, no início do ano 2000, o W3C estende e padroniza a sintaxe HTML, dando-lhe mais rigor e organização. A este padrão deu-se o nome de XHTML (HTML eXtensível). O “xis" de “eXtensível" é uma alusão ao padrão XML. Usado para troca de dados entre aplicações distintas, desde o princípio, as implementações de frameworks para manipulação de XML sempre foram bem rigorosos – fazer parsing de um arquivo XML mal formado sempre resulta em erro.

As principais características do padrão XHTML são:

Todas as tags devem ter o par de abertura e fechamento.Ex: <ul> <li>Banana <li>Mamão <li>Maçã <li>Abacate<ul>

<ul> <li>Banana</li> <li>Mamão</li> <li>Maçã</li> <li>Abacate</li><ul>

Código HTML incorreto XHTML equivalente

Tags unas, que inerentemente não possuam o par de fechamento, devem ser terminadas com barra.Ex.:Eis a minha foto:<img src="foto.jpg">

Eis a minha foto:<img src="foto.jpg" />

Código HTML incorreto XHTML equivalente

PS: É importante o espaço antes da barra de finalização nas tags unas.

Tags aninhadas devem ser fechadas correspondentemente.Ex.:<i><b>Velho negrito e itálico</i></b> <b><i>Velho negrito e itálico</i></b>

Código HTML incorreto XHTML equivalente

Todas a tags e atributos devem estar em letras minúsculas.Ex.:<STRONG><EM>Nova ênfase e destaque</EM></STRONG>

<strong><em>Nova ênfase e destaque</em></strong>

Código HTML incorreto XHTML equivalente

Atributos de tags também devem estar em minúsculas.Ex.:<button onClick="alert('Errado!')">Clique </button>

<button onclick="alert('Certo!')">Clique </button>

Código HTML incorreto XHTML equivalente

Valores de atributos em tags devem ser delineados por aspas duplas.Ex.:<img src=foto.jpg src=30 heigth=40> <img src="foto.jpg" width="30"

height="40" />Código HTML incorreto XHTML equivalente

Todos os atributos devem constituir-se de pares nome/valor.Ex.:<option selected>Selecione</option> <option selected="selected">Selecione</

option>Código HTML incorreto XHTML equivalente

PS: Nos casos de atributos HTML que não são pares nome/valor, o código XHTML equivalente ocorre atribuindo-se valor igual ao mesmo nome do atributo. Em XHTML não há os valores de atributo, p.ex., como “true" ou “false".

O atributo “id" substitui o “name", e este deverá ser único no código.Ex.:<input type="text" name="endereco" /> <input type="text" id="endereco" />

Código HTML incorreto XHTML equivalente

Além disso (http://www.heliocosta.com.br/blog/como-escrever-codigo-xhtml-valido/) É importante observar que o padrão HTML não morreu, sendo mantido normalmente pelo W3C. Assim, devido

aos diferentes padrões – e suas diferentes versões -- hoje em dia é imprescindível declarar o tipo de documento web que estamos manipulando. A declaração do tipo de documento web é feita por meio de DOCTYPES.

A declaração do DOCTYPE deve vir logo no início de qualquer documento web. Atualmente existem os seguintes DOCTYPES (http://www.pinceladasdaweb.com.br/blog/2006/12/21/utilize-o-doctype-correto/):

HTML Strict<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML Frameset<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

PS: Só para ficar claro, tem-se que XHTML é apenas uma especificação diferenciada do padrão HTML. O mime-type correspondente ainda é o próprio text/html. Assim, o nome de arquivos com código XHTML pode usar a extensão .html (ou .htm) normalmente.

A principal idéia por trás da diferenciação dos tipos de documentos, além da definição de qual padrão web está sendo usado, é também buscar a independência entre apresentação e conteúdo. Por definição os padrões para documentos html devem definir a estrutura do documento e nunca sua aparência. Este, a propósito, é o motivo de tags como <font>, <b>, <i>, <u>, <center> e outras, além de atributos que possibilitam efeito similar, como align="left" serem considerados obsoletos nas versões. Assim, ainda que espere ver um título de documento em negrito e com um tamanho maior, NUNCA seria adequado fazê-lo assim:

<font size="16"><b>Hino Nacional Brasileiro</b></font>

Sendo a forma semanticamente correta:

<h1>Hino Nacional Brasileiro</h1>

O DOCTYPE Strict é o que possibilita a maior separação entre apresentação e conteúdo, pois não permite nenhum elemento referente a apresentação no código, ou seja, nenhuma das tags ou atributos obsoletos (http://www.maujor.com/dicas/deprecated.php). Nesta situação, toda a aparência da página deverá ser dada integralmente por folhas de estilo.

Já o DOCTYPE Transitional possibilita a maioria das marcações de apresentação obsoletas, sendo a mais simples de se usar quando se deseja converter uma página renderizada em quirks mode (código não válido) em uma página aderente aos padrões.

O DOCTYPE Frameset é usado apenas para o caso de páginas com frames. Seu uso é pouco recomendado hoje em dia, devido às vantagens que se tem em conseguir o mesmo efeito visual apenas com folhas de estilo. Veja os exemplos disponíveis em http://www.dynamicdrive.com/style/layouts/category/C11/

PS: Consulte a relação de todas as tags html em http://www.w3schools.com/tags/default.asp.

A propósito, com o que já sabemos até aqui, é oportuno apresentar neste momento a estrutura mínima básica para um documento XHTML:

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

<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Esqueleto de uma página XHTML válida</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body></body></html>

O DOCTYPE deve ser sempre o primeiro elemento presente no código – até para definir que tipo de documento estamos desenvolvendo. Mas, como visto no esqueleto mínimo acima, há outros elementos essenciais para a uma página web.

É hora então de analisar os elementos que compõem a estrutura mínima de uma página, para que você possa visualizar e entender o código html que está por trás daquilo que você vê.

PS: Você nunca mais verá uma página web da mesma forma!

É sempre muito importantevisualizar e entender o código...

CONHECENDO OS ELEMENTOS HTMLOs elementos mínimos essenciais para a estrutura de uma página web são aqueles mostrados no código pouco mais acima. A saber (além do DOCTYPE) toda página web é composta de duas seções: uma cabeça1 e um corpo.

A cabeça é uma área que contém relevantes informações sobre o próprio documento html (meta-

1 Por questões de tradução, muitas vezes também mencionado como cabeçalho. Entretanto, optou-se por não utilizar esta forma para evitar confusão com as tags de cabeçalho <h1> a <h6>, apresentadas mais à frente.

informações) além de referências a outras páginas html, folhas de estilos e scripts. Por outro lado, o corpo é onde tudo acontece, onde realmente estão inseridos os conteúdos. PS: A seguir, detalhes sobre estas e algumas outras tags especialmente importantes para desenvolvedores web.<html></html>A raíz de todo documento web. A tag de abertura deve vir imediatamente após a declaração do DOCTYPE e a tag de fechamento deve ser a última coisa presente no código. A tag html deve ser única num arquivo, ou seja, não é possível definir mais de um documento html dentro do mesmo arquivo. Também deve conter obrigatoriamente as tags <head> e <body>.

Atributos obrigatórios: Conteúdo:- xmlns http://www.w3.org/1999/xhtml

(valor fixo) referência ao namespace do padrão XHTML<head></head>Define a cabeça do documento, onde devem constar informações sobre o documento, dentre as quais uma tag <title>.<meta />Provê diversos tipos de meta informação sobre a página, como descrição da página, nome do autor, ou data da última atualização. Deve aparecer na cabeça da página.

Atributos obrigatórios: Conteúdo:- content o valor atribuído

Atributos opcionais: Conteúdo:- name qualquer informação a ser descrita, tal como description ou author- http-equiv usado no lugar de name para descrever um cabeçalho http correspondente<title></title>Define o título da página, item obrigatório para o padrão XHTML. Deve aparecer na cabeça da página.<link></link>Define um relacionamento entre a página em questão e outras páginas ou recursos externos. É comumente usado para referência arquivos favicon ou folhas de estilo. Deve aparecer na cabeça da página.

Atributos opcionais: Conteúdo:- href referência de destino do relacionamento- type mime-type do arquivo relacionado- media screen|print|projection|braille|speech|all mídia do recurso- rev, rel relacionamento da página atual com o recurso destino e vice-versa- charset codificação de caracteres do recurso destino- hreflang código do idioma do recurso de destino<style></style>Define código de programação script, diretamente ou referenciando a arquivo externo. Deve aparecer na cabeça da página.

Atributos obrigatórios: Conteúdo:- type mime-type da do tipo de conteúdo, p.ex., text/cssAtributos opcionais: Conteúdo:- media screen|print|projection|braille|speech|all mídia do recurso- title atribui um nome aos estilos, que podem, p.ex., ser referenciados via script

<script></script>Define código de programação script, diretamente ou referenciando a arquivo externo. Deve aparecer na cabeça da página. Deve aparecer na cabeça da página.

Atributos obrigatórios: Conteúdo:- type mime-type da linguagem de script utilizada, p.ex., text/javascriptAtributos opcionais: Conteúdo:- src caminho para o fonte de um arquivo script externo

PS: Abordaremos o uso de folhas de estilos e programação de scripts client-side nas partes seguintes desta apostila.<noscript></noscript>Define conteúdo a ser exibido quando não houver suporte à execução de scripts pelo navegador web. Deve aparecer na cabeça da página.<frameset></frameset>(Apenas para o DOCTYPE frameset). Define um conjunto de frames.

Atributos opcionais: Conteúdo:- cols, rows o tamanho (em porcentagem, pixels ou restante *), quantidade e orientação

dos frames. Framesets também podem ser aninhados.<frame />(Apenas para o DOCTYPE frameset). Define um frame, uma área retangular de uma página html capaz de exibir outras páginas html independentemente. Devem vir dentro de um frameset.

Atributos opcionais: Conteúdo:- frameborder 0|1 indica se o frame deve ou não apresentar uma borda|- name nome para o frame- src caminho para a página html destino a ser carregada- noresize noresize indica que o frame não permite ser redimensionado- scrolling yes|no|auto indica se o frame deve exibir uma barra de rolagem

PS: Sempre é bom ressaltar que o uso de frames é controverso para muitos profissionais (http://www.useit.com/alertbox/9612.html). Avalie se será bem aplicado ao seu caso, lembrando que o efeito visual pode ser conseguido similarmente com folhas de estilo.<body></body>Define a cabeça do documento, onde devem constar informações sobre o documento, dentre as quais uma tag <title>.

Vimos as tags básicas para definição da estrutura mínima e da cabeça do documento. No entanto, já sabemos que o conteúdo efetivo do documento ocorre no seu corpo. Veremos então agora algumas das tags de conteúdo e suas finalidades para dar significado semântico à estrutura do documento.

Falando de Semântica (ou porque Tableless não existe)Como já dito, obter-se layouts adequados nos navegadores modernos é algo alcançável desde que se tenha código de acordo com os padrões. Entretanto, obediência aos padrões envolve algo além da sintaxe de acordo com a especificação XHTML. Envolve também semântica.

A semântica do código HTML é o principal motivo pelo qual se desaconselha práticas da época da Guerra dos Browsers, como a de se utilizar elements tabelas do HTML para estruturação e alinhamento de layouts. De uns tempos pra cá, ao se mencionar desenvolvimento web com padrões, alguns desenvedores inventaram o termo “Tableless" para se referir a sites que não usam tabelas para estruturar layouts.

Infelizmente, vê-se que o mencionar um “Site Tableless" tornou-se algo muito mais mercadológico,

para vender a idéia de sites web modernos e que muitas vezes não correspondem à realidade. Seria mais adequado dizer-se “Site Web Semântico" até por um simples motivo: não é a eliminação de tabelas por si só que garantirá uma melhoria no desenvolvimento e manutenção de sites, mas sim a adequada utilização das tags para suas corretas finalidades. Ou seja, sua correta adequação semântica (http://www.maujor.com/blog/2008/02/20/fora-tableless/).

Neste sentido, não se deve eliminar a utilização de tabelas em html, mas sim disciplinar seu uso quando necessário, isto é, quando se precisar exibir dados tabulares. Da mesma forma, o uso de tags diferentes da h1 para discriminação de títulos principais de um documento implica em sites igualmente difíceis de desenvolver e manter.

Na versão 1.0 do padrão XHTML Strict existem XX tags definidas que podem ser classificadas de diversas maneiras (p.ex., como no W3Schools: http://www.w3schools.com/tags/ref_byfunc.asp, e no HtmlDog: http://www.htmldog.com/reference/htmltags/), mas para uma introdução mais didática, nossa abordagem irá conter apenas três grupos: a família dos textos, a família dos formulários e a família das listas e tabelas. (PS: Esta é uma classificação própria, inventada apenas para fins didáticos). Veremos mais à frente que esta classificação não é o suficiente para enquadrar todo o conjunto de tags, mas é o bastante para começarmos a conhecer o padrão.

Antes de mais nada, deve-se ter em mente que as tags definem uma hierarquia própria a partir de sua raiz, ou seja, algumas tags só podem aparecer como filhas (contidas em) algumas determinadas outras. Para detalhes, consulte http://www.zvon.org/xxl/xhtmlBasicReference/Output/index.html.

FAMÍLIA DOS TEXTOS<p></p>Apenas um parágrafo de texto :-P. É uma das tags mais importantes uma vez que não se pode admitir texto diretamente sob a tag body, como veremos a seguir.<br />Quebra de linha. Deve ser usada com bastante parcimônia, sendo seu uso mais adequado para marcar a separação de linhas dentro de um parágrafo quando isto for realmente necessário (p.ex., numa poesia, para delimitar versos dentro de uma estrofe).

Sub-tipo: cabeçalhos<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> Definem diversos níveis de cabeçalhos (ou títulos, subtítulos, sub-subtítulos e etc) no conteúdo do documento html, sendo h1 o cabeçalho principal.

Sub-tipo: formatação semântica<em></em>, <strong></strong>Definem, respectivamente, texto com ênfase e texto com mais força na entonação. (Alguns navegadores renderizam-nos como negrito e itálico).

Sub-tipo: citação<q></q>, <cite></cite>, <blockquote></blockquote>Definem citações. Os dois primeiros representam citações de uma linha (sendo que com a tag <q> é possível atribuir a origem da citação) enquanto que <blockquote> representa um bloco de texto de citação.

Sub-tipo: siglas<abbr></abbr>, <acronym></acronym>Ambos definem siglas. Um acrônimo é uma abreviatura que pode ser lida sem soletração.

Sub-tipo: revisões de texto

<ins></ins>, <del></del>Se referem a trechos de texto incluídos e removidos.

Sub-tipo: acidentes textuais<pre></pre>, <code></code>, <var></var>, <kbd></kbd>, <samp></samp>, <dfn></dfn>, <address></address>Representam, respectivamente, texto pré-formatado (mantendo identação e quebras de linha), trecho de código, referência a uma variável, referência a digitação no teclado, textos de saída no monitor, definição de um termo e informação de contato.

FAMÍLIA DOS FORMULÁRIOS<form></form>Define um formulário, uma área com conjunto de campos para entrada de dados.

Atributos obrigatórios: Conteúdo:- action a url para a qual os dados do formulário são submetidos

Atributos opcionais: Conteúdo:- method get|post método de submissão dos dados- enctype multipart/form-data necessário quando houver um campo input file- accept mime-types permitidos para campos input file- accept-charset codificações de caracter permitidos

Sub-tipo: estrutura de formulário<fieldset></fieldset>Agrupa um conjunto de campos logicament relacionados.<legend></legend>O título de um fieldset.

Atributos opcionais: Conteúdo:- accesskey uma tecla de atalho para o fieldset<label></label>Define o rótulo para um campo. Pode fazê-lo envolvendo o campo relacionado ou por meio do atributo for.

Atributos opcionais: Conteúdo:- for indica o campo ao qual o rótulo se refere- accesskey uma tecla de atalho para o campo

Sub-tipo: campos de formulário<textarea></textarea>Um campo para entrada de várias linhas de texto. Pode ter um valor pré-definido em seu conteúdo.

Atributos obrigatórios: Conteúdo:- rows, cols tamanho do elemento em linhas e colunas

Atributos opcionais: Conteúdo:- name nome do elemento- disabled disabled usado para desabilitar o elemento- readonly readonly torna o campo apenas leitura- accesskey uma tecla de atalho para o campo- tabindex indica a ordem de acesso ao campo via teclado<select></select>

Define um campo com lista de opções, tanto do tipo combo box quanto list box.

Atributos opcionais: Conteúdo:- name nome do elemento- size quantidade de itens exibidos inicialmente (maior que 1 para tipo list box)- multiple multiple indica se um campo list box permite seleção múltipla- disabled disabled usado para desabilitar o elemento- tabindex indica a ordem de acesso ao campo via teclado<option></option>Define os itens para um campo select.

Atributos opcionais: Conteúdo:- selected selected determina a opção que inicialmente selecionada- value o valor associado à opção correspondente <optgroup></optgroup>Agrupa um conjunto de itens de um campo select.

Atributos obrigatórios: Conteúdo:- label o texto que nomeia o grupo de opçõesAtributos opcionais: Conteúdo:- disabled disabled usado para desabilitar o elemento<input />O elemento mais versátil do padrão html, podendo representar diferentes tipos de entrada de dados.

Atributos opcionais: Conteúdo:- name nome do elemento- type text|password|checkbox|radio|hidden|submit|reset|button|

image|file- value valor associado ao campo. Obrigatório para os tipos checkbox e radio.- checked checked indica se um campo checkbox ou radio já deve vir selecionado- maxlength quantidade máxima de caracteres suportada pelo campo- src para campo do tipo image, indica o caminho do arquivo de imagem- alt para campo do tipo image, define o texto alternativo da imagem- accept mime-types permitidos para campos input file- disabled disabled usado para desabilitar o elemento- readonly readonly torna o campo apenas leitura- accesskey uma tecla de atalho para o campo- tabindex indica a ordem de acesso ao campo via teclado<button></button>Um tipo de botão um pouco mais flexível que os definidos com elementos input.

Atributos opcionais: Conteúdo:- name nome do elemento- disabled disabled usado para desabilitar o elemento- type submit|reset|button- value valor associado ao campo- accesskey uma tecla de atalho para o campo- tabindex indica a ordem de acesso ao campo via teclado

FAMÍLIA DAS LISTAS E TABELASSub-tipo: listas

<ul></ul>, <ol></ol>, <dl></dl>Listas de elementos. Referem-se aos tipos: “unordered list” (lista não ordenada) e “ordered list” (lista ordenada) e “definition list” (lista de definições).<li></li>Se refere a um item de uma lista, tanto ordenada quanto não ordenada).<dt></dt>, <dd></dd>Se referem aos termos e suas respectivas descrições numa lista de definições.

Sub-tipo: tabelas<table></table>Define um elemento tabela para exibição de dados tabulares.

Atributos opcionais: Conteúdo:- summary descrição textual da tabela<thead></thead>, <tfoot></tfoot>, <tbody></tbody>Definem seções dentro de uma tabela. São úteis para otimizar a visualização e acesso aos dados, p.ex., pondo cabeçalho e rodapés fixos e barra de rolagem no conjunto de dados do corpo.

Atributos opcionais: Conteúdo:- align left|right|center|justify|char- valign top|middle|bottom|baseline- char, charoff relacionados ao alinhamento de dados a partir de casas decimais<tr></tr>Define uma linha de uma tabela.

Atributos opcionais: Conteúdo:- align left|right|center|justify|char- valign top|middle|bottom|baseline- char, charoff relacionados ao alinhamento de dados a partir de casas decimais<th></th>, <td></td>Definem células de uma tabela, sendo respectivamente células de cabeçalho e células de dados.

Atributos opcionais: Conteúdo:- colspan para quantas colunas um merge de uma célula se expande horizontalmente- rowspan para quantas linhas um merge de uma célula se expande verticalmente- abbr ruma descrição do dado presente na tabela - align left|right|center|justify|char- valign top|middle|bottom|baseline- char, charoff relacionados ao alinhamento de dados a partir de casas decimais- scope row|col indica se o cabeçalho correspondente é horizontal ou vertical

PS: Novamente esta classificação não é completa, apresentada apenas para fins didáticos. Algumas tags muito importantes – principalmente para programadores – e que não se enquadraram nesta classificação, como a tag <a> e <object> ficaram de fora. A consulta aos padrões é altamente recomendada.

Além dos atributos específicos dessas famílias de tags, existe um conjunto de atributos comuns que se aplicam a todas as tags de conteúdo. São eles:

Atributos básicos- id Identificação única de um elemento. Usado geralmente para referência ao

elemento via programação ou folhas de estilos.- class Define uma característica possivelmente em comum entre diversos elementos e

a partir da qual seja possível classificá-los ou agrupá-los. Também bastanteusado para aplicação de folhas de estilos.

- style Atribui uma folha de estilos inline apenas ao próprio elemento. Seu uso bastante desaconselhável, devendo ser usado apenas em circunstâncias bemespecíficas, pois pode resultar novamente na indissociação entre apresentaçãoe conteúdo.

- title Texto descritivo do elemento (alguns navegadores utilizam como hint). Para as

tags <abbr>, <acronym> e <dfn> representa o próprio termo descrito.Atributos de internacionalização- dir Permite alterar a direção do texto contido no elemento. Admite os valores ltr

(“left to right”) ou rtl (“right to left”), necessário para escrita de algunsidiomas orientais.

- xml:lang Especifica o idioma do texto contido no elemento como, p.ex. en (english).

Atributos de eventos- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Utilizados para programação script em resposta a eventos da interface.Entretanto, como seu uso também prejudica a manutenibilidade do código, ébem mais recomendável a utilização de scripts não-instrusivos, conformetécnica mostrada mais à frente.

Mas afinal, pra quê isso tudo?

Bozo, by Karlissonwww.nerdson.com

Bem, é claro que o uso de padrões quando eles existem é sempre uma coisa boa. Mas se você ainda não se convenceu disto, é provável que esteja se perguntando o mesmo que nosso amigo Bozo. Neste caso, é importante ressaltar as vantagens do desenvolvimento com padrões web.

Melhor manutenibilidade – desenvolver sites e aplicações de acordo com os padrões web resulta em código mais limpo e muito mais fáceis de manter;

Melhor utilização de recursos – páginas fora dos padrões oferecem mais risco de levar os navegadores a estados inesperados, o que representa maior propensão a erros. Além disso, como vimos, entrar em “quirks mode” limita nossa utilização de recursos mais avançados dos navegadores;

Menos retrabalho – tendo a semântica em mente, com a separação entre apresentação e conteúdo, obter-se diferentes versões de nossas páginas passa a ser algo trivial. (Por exemplo, para se ter uma versão para impressão não há necessidade de mais tempo desenvolvimento, mas apenas uma folha

de estilos voltada para impressão que ressalte alguns elementos e oculte outros, como cores e imagens de fundo);

Garantia de compatibilidade – desenvolver de acordo com os padrões é a única garantia que temos de que nossos sites e aplicações web poderão funcionar corretamente por muitos anos, mesmo em versões de navegadores web que ainda estão por vir. Desenvolver com padrões é desenvolver para o futuro;

Visualização em múltiplas mídias – ter um site ou aplicação web adequadamente desenvolvido nos permite oferecer ao cliente mais possibilidades de acesso à informação, mesmo em palmtops, celulares, handhelds, tevê digital, leitores de tela e qualquer outro tipo de aparelho ou mídia com suporte à web;

Acessibilidade – o uso de padrões possibilita que pessoas com algum grau de deficiência (seja visual ou motora) possam interagir com os sites e aplicações web normalmente – uma preocupação sempre relevante, especialmente em se tratando de políticas governamentais;

Por que impedir que estas pessoas utilizem nossos sites e aplicações web?

Melhor visibilidade para motores de busca – no caso de sites para Internet, o uso de padrões expôe melhor o conteúdo de nossos sites a mecanismos de busca, o que os torna mais visíveis na web e mais fáceis de encontrar, resultando e maior visitação;

Maior rapidez no carregamento – desenvolver com padrões resulta em páginas mais limpas e com menos código html desnecessário, o que significa que além de escrevermos menos código, nossas páginas carregarão mais rápido;

Além disso, pense que desenvolver com os padrões é de fato a forma correta de se desenvolver para a web e que isso de quão avançada sejam as tecnologias de servidor que estejamos usando.

ConclusãoCom isto chegamos ao fim da primeira parte de nossa apostila sobre padrões web. Certamente não conseguimos cobrir toda a especificação dos padrões web para desenvolvimento de sistemas. Entretanto, esperamos ter provido informações básicas para solidificar as bases para o desenvolvimento de sites e sistemas de acordo com os padrões web.

Outros aspectos que julgamos essenciais para o desenvolvimento web e que muitas vezes são negligenciados, tais como uso de folhas de estilos e programação de scripts deverão ser assunto das próximas partes desta apostila. Até lá.