Continuando com o assunto formulários web, falaremos hoje sobre mais alguns elementos e atributos, e dicas para criação de formulários acessíveis. Aproveitem bem o conteúdo e estudem com calma:

Elementos FIELDSET e LEGEND

No decorrer da nossa vida como profissionais de web (designers, programadores de interfaces, desenvolvedores etc.), construiremos desde simples formulários de contato, até complexos e extensos formulários de cadastro ou compra de produtos. E em todos os casos teremos a necessidade de agrupar os elementos de um formulário conforme características relacionadas. Já imaginou um formulário de cadastro onde os campos para dados pessoais se misturassem com os campos para dados profissionais, ou escolares? Sem uma distinção clara entre cada grupo de campos o formulário seria uma zona, aumentando em muito o tempo levado para preenchê-lo e a taxa de usuários que desistiriam.

Para agrupar os campos de um formulário com características comuns, utilizamos o elemento FIELDSET. Todos os campos serão englobados pelas tags <fieldset></fieldset>. Visualmente o elemento FIELDSET criará uma borda em torno dos elementos nele contidos, criando um bloco de conteúdo isolado de outros elementos. Se nosso formulário possuir vários elementos FIELDSET, teremos então várias caixas de elementos, separadas umas das outras. Cada elemento FIELDSET pode possuir uma legenda, ou seja, um texto indicando ao que se referem os elementos contidos nele (Ex: Dados Pessoais, Dados Escolares, Dados Residenciais, Dados Profissionais etc.). Essas legendas são marcadas pela tag LEGEND – <legend></legend>. Veja um exemplo dos elementos FIELDSET e LEGEND:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<form action="" method="post">
   <fieldset>
         <legend>Formulário de Contato</fieldset>
         <label for="nome">Nome:</label> <input type="text" id="nome" /><br />
         <label for="email">Email:</label> <input type="text" id="email" /><br />
         <label for="masc">MASC:</label> <input type="radio" name="masc" /> <label for="fem">FEM</label> 
         <input type="radio" name="sexo" id="fem" /><br />
         <label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" /><br />
         <label for="como">Como nos conheceu:</label> 
         <select id="como">
            <option>Google</option>
            <option>Indicação de amigo</option>
            <option>Outros</option>
         </select><br />
         <label for="msg">Mensagem:</label> <textarea cols="7" rows="40" id="msg"></textarea>
         <button type="submit">Enviar</button>
   </fieldset>  
</form>

Resultado:

Antes de prosseguir, façam o seguinte exercício:

Entrem na página de cadastro do Mercado Livre e observem o formulário: esqueçam o layout e diagramação, e reconstruam esse formulário separando os elementos por FIELDSET e LEGEND (Dados Pessoais e Dados do Usuário no Mercado Livre).

Atributos NAME, ID e VALUE

Quem tem nos acompanhado desde o primeiro post sobre formulários, tem visto que utilizo em alguns momentos os atributos NAME, ID e VALUE, e sempre prometo que irei explicá-los “mais pra frente”. Pois bem, “mais pra frente” é agora!

Qualquer controle de formulário (INPUT, SELECT, TEXTAREA, BUTTON) permite ao usuário passar informações para o nosso site, e essas informações serão enviadas para algum script (em PERL, CGI, PHP, ASP.NET, JAVA etc.) que receberá os dados, verificá-los e por fim dará um fim ao formulário (envio por email, inserção num banco de dados etc.). Ok, mas como esse script saberá qual foi o valor digitado pelo usuário num campo de texto, por exemplo? Simples: quando clicamos no botão ENVIAR, mandamos uma espécie de catálogo de dados, onde cada campo do formulário corresponde a uma ficha desse catálogo. Essa ficha, por sua vez, é dividida em duas partes: índice (uma forma de referenciar o campo, e diferenciá-lo) e conteúdo (o valor digitado pelo usuário). Sabemos o que é o conteúdo, mas o que são os índices? O atributo NAME funciona como índice de um campo do formulário, ou seja, é o NAME do elemento que será referenciado pelo script responsável por processar o formulário.

Vários elementos HTML admitem o uso do atributo NAME (lembrem-se que utilizamos NAME para criação de links âncoras), assim como o atributo ID. Ambos os atributos tem uma única função: identificar um elemento. Simples assim! No caso dos controles de formulário, o atributo NAME tem uma função de integração com linguagens de programação para o tratamento de dados; assim como tanto NAME e ID podem ser usados como referência de elementos para JavaScript, CSS etc.

Ok! Qual é a diferença entre NAME e ID? O atributo ID funciona como “o CPF do elemento”, ou seja, não podem haver dois ou mais elementos, na mesma página, com o mesmo ID. Já o atributo NAME admite repetição, podemos ter vários elementos com o mesmo NAME. Por isso o elemento LABEL se vincula ao campo de formulário através do atributo ID… Veja um formulário com ambos os atributos ID e NAME:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<form action="" method="post">
   <fieldset>
         <legend>Formulário de Contato</fieldset>
         <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" /><br />
         <label for="email">Email:</label> <input type="text" id="email" name="email" /><br />
         <label for="masc">MASC:</label> <input type="radio" name="masc" /> <label for="fem">FEM</label> <input type="radio" name="sexo" id="fem" /><br />
         <label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" name="news" id="news" /><br />
         <label for="como">Como nos conheceu:</label> 
         <select id="como" name="como">
            <option>Google</option>
            <option>Indicação de amigo</option>
            <option>Outros</option>
         </select><br />
         <label for="msg">Mensagem:</label> <textarea cols="7" rows="40" id="msg" name="msg"></textarea>
         <button type="submit">Enviar</button>
   </fieldset>  
</form>

Muitos de vocês já viram formulários web que apresentam algum conteúdo dentro da caixa de texto, normalmente uma instrução de preenchimento. E nesse momento devem se perguntar: como posso fazer isso? Simples: basta adicionar o atributo VALUE em seus elementos. Veja como funciona:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<form action="" method="post">
   <fieldset>
         <legend>Formulário de Contato</fieldset>
         <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" value="Digite seu nome.." /><br />
         <label for="email">Email:</label> <input type="text" id="email" name="email"  value="Digite seu email..." /><br />
         <label for="masc">MASC:</label> <input type="radio" name="masc" id="masc" value="masc" /> <label for="fem">FEM</label> <input type="radio" name="sexo" id="fem" value="fem" /><br />
         <label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" name="news" id="news" value="" /><br />
         <label for="como">Como nos conheceu:</label> 
         <select id="como" name="como">
            <option>Google</option>
            <option>Indicação de amigo</option>
            <option>Outros</option>
         </select><br />
         <label for="msg">Mensagem:</label> <textarea cols="7" rows="40" id="msg" name="msg">O elemento textarea não possui o atributo VALUE</textarea>
         <button type="submit">Enviar</button>
   </fieldset>  
</form>

Resultado:

Reparem que mesmo não exibindo nenhum texto na tela, usamos o atributo VALUE nos elementos INPUT RADIO, INPUT CHECKBOX e OPTION. Esses controles permitem ao usuário escolher uma ou mais opções, dentre uma lista, e o conteúdo do atributo VALUE será o valor enviado para o script de processamento do formulário, assim que o mesmo for disparado.

Atributos CHECKED e SELECTED

Podemos também apresentar um elemento INPUT CHECKBOX (aquelas caixinhas onde marcamos / desmarcamos com um clique) já preenchido, por padrão. Para isso basta adicionar o atributo CHECKED no elemento.

1
2
3

<form action="" method="post">
   <label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" name="news" id="news" value="news" checked="checked" />
</form>

Resultado:

Da mesma forma podemos escolher um elemento OPTION para aparecer selecionado, por padrão, dentro de um SELECT. Basta adicionar, ao OPTION, o atributo SELECTED. Veja como fica:

1
2
3
4
5
6
7

<form action="" method="post">
   <select id="como" name="como">
       <option value="google">Google</option>
       <option value="amigo">Indicação de amigo</option>
       <option value="outros" selected="selected">Outros</option>
   </select> 
</form>

Resultado:

Atributos READONLY e DISABLED

Existem situações em que o usuário não pode manipular um elemento de formulário. Imagine que você tem alguns campos para compor o endereço do usuário, e o usuário não poderá digitar diretamente o endereço, precisará primeiro preencher o CEP, e aí será feita uma consulta na base de endereços completando os demais campos (rua, cidade, estado etc.); ou então, você quer manter o botão de envio do formulário desabilitado, enquanto alguns campos não forem preenchidos. Enfim, não importa o seu motivo, se for necessário desativar elementos de um formulário, utilizaremos os atributos READONLY ou DISABLED.

READONLY é um atributo aplicado apenas nos elementos INPUT e TEXTAREA, e impede o usuário de editar o conteúdo da caixa de texto. O valor do campo será enviado para o script de processamento, assim como o usuário poderá dar foco normalmente no campo e a navegação via teclado funcionará normalmente. A única coisa que o usuário não poderá fazer é: editar o conteúdo.

DISABLED é um atributo aplicado nos elementos INPUT, TEXTAREA, SELECT, OPTGROUP, OPTION e BUTTON, e desabilita o campo do formulário, impedindo a edição do seu valor. Quando desabilitamos um campo, seu valor não será enviado junto com os demais campos do formulário, o usuário não conseguirá colocar o foco no campo e a navegação via teclado será desabilitada.

Veja um exemplo dos atributos READONLY e DISABLED:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<form action="" method="post">
   <fieldset>
         <legend>Formulário de Contato</fieldset>
         <label for="nome">Nome:</label> <input type="text" id="nome" name="nome" value="Diego" readonly="readonly" /><br />
         <label for="email">Email:</label> <input type="text" id="email" name="email"  value="Digite seu email..." /><br />
         <label for="masc">MASC:</label> <input type="radio" name="masc" id="masc" value="masc" /> <label for="fem">FEM</label> <input type="radio" name="sexo" id="fem" value="fem" /><br />
         <label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" name="news" id="news" value="" /><br />
         <label for="como">Como nos conheceu:</label> 
         <select id="como" name="como" disabled="disabled">
            <option>Google</option>
            <option>Indicação de amigo</option>
            <option>Outros</option>
         </select><br />
         <label for="msg">Mensagem:</label> <textarea cols="7" rows="40" id="msg" name="msg">O elemento textarea não possui o atributo VALUE</textarea>
         <button type="submit">Enviar</button>
   </fieldset>  
</form>

Resultado:

Por hoje é só, pessoal! No próximo post terminaremos essa parte sobre formulários web, falando um pouco sobre como incrementar a acessibilidade em nossos formulários. Até lá e bom estudo!

Abraços,
Diego.

Falamos anteriormente sobre o que são formulários web e o elemento INPUT. Hoje continuaremos a descrever os elementos que compõem um formulário. Então, mãos à obra:

Elementos SELECT, OPTION e OPTGROUP

Chamamos de SELECT aquelas caixinhas de seleção, onde ao pressionar uma seta para baixo, visualizamos uma lista de opções, dentre as quais escolheremos apenas uma. Para criar uma caixa de seleção, basta utilizar as tags <select></select>. Uma vez criada a caixa de seleção, utilizaremos o elemento OPTION para criar as opções a serem selecionadas. Cada opção será marcada pelas tags <option></optiont>. Veja o exemplo abaixo:

1
2
3
4
5
6
7
8

<form action="" method="post">
<select>
<option>HTML & XHTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>PHP</option>
</select>
</form>

Resultado:

Em caixas de seleção extensas, onde o usuário terá uma lista enorme de opções para escolha, pode ser interessante agrupar as opções que tenham relações entre si. Para criar grupos de opções, utilizaremos o elemento OPTGROUP. Veja como fica o código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<form action="" method="post">
<select>
<optgroup label="Camada Visual">
    <option>HTML & XHTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
</optgroup>
<optgroup label="Programação">
    <option>PHP</option>
    <option>Phyton</option>
    <option>Ruby</option>
</optgroup>
<optgroup label="Banco de Dados">
    <option>Modelagem de Dados</option>
    <option>Linguagem SQL</option>
    <option>MySQL Server</option>
</optgroup>
</select>
</form>

Resultado:

Elemento TEXTAREA

Sabemos como criar caixas de texto com uma única linha mas, não temos idéia de como permitir ao usuário digitar uma mensagem em várias linhas. Para criar esse tipo de caixa de texto, usaremos o elemento TEXTAREA. Veja o código abaixo:

1
2
3

<form action="" method="post">
<textarea rows="7" cols="40"></textarea>
</form>

Resultado:

Os atributos ROWS e COLS definem o tamanho do TEXTAREA: ROWS fica responsável pela quantidade de linhas (altura); COLS define a quantidade de colunas (largura) da caixa de texto.

Elemento BUTTON

Podemos criar botões para nossos formulários, com muito mais liberdade do que o elemento INPUT. Com o uso do elemento BUTTON, podemos inserir conteúdo dentro de nossos botões: imagens, flash, texto etc. Veja o código abaixo:

1
2
3
4

<form action="" method="post">
<input type="text" /> 
<button type="submit">Enviar</button>
</form>

Resultado:

Usamos o atributo TYPE para definir o tipo do botão, possuímos três valores distintos para esse atributo: SUBMIT – cria um botão para envio de formulário; RESET – cria um botão para limpar todos os valores de um formulário; BUTTON – cria um botão associado a um evento do JavaScript, que normalmente inicia uma função do sistema (Ex: botões para inserção, alteração e exclusão de itens). Dentro das tags <button></button> podemos inserir qualquer tipo de conteúdo: imagens, flash, texto etc. Isso nos dá uma grande vantagem sobre o elemento INPUT, que é um elemento vazio.

Elemento LABEL

Com o que vimos até agora, podemos criar nossos formulários web. Já conhecemos o elemento INPUT e seus tipos, SELECT, TEXTAREA e BUTTON. Não construímos um formulário apenas enfileirando elementos, é preciso que cada campo possua um texto indicando como devemos preenchê-lo. Vamos montar um pequeno formulário de cadastro:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<form action="" method="post">
Nome: <input type="text" /><br />
Email: <input type="text" /><br />
Sexo: <input type="radio" name="sexo" />MASC 
<input type="radio" name="sexo" />FEM<br />
Deseja receber nossa newsletter: <input type="checkbox" /><br />
Como nos conheceu: <select>
   <option>Google</option>
   <option>Indicação de amigo</option>
   <option>Outros</option>
</select><br />
Mensagem: <textarea cols="7" rows="40"></textarea>
<button type="submit">Enviar</button>
</form>

Resultado:

Antes de mais nada: o uso da tag BR não é aconselhável. Diagramação de elementos fica por conta do CSS, como já falamos anteriormente. Feito esse aviso, reflitam por um instante: visualmente, conseguimos associar a legenda NOME ao INPUT TEXT correspondente, mas, quando construímos um site, temos diversos perfis de visitantes e o conteúdo deve ser acessível a todos eles. A tag LABEL associa um elemento de formulário à sua legenda correspondente, essa tag possui um atributo chamado FOR, cujo valor deve ser igual ao valor do atributo ID do elemento referenciado pelo LABEL. Veja como funciona:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<form action="" method="post">
<label for="nome">Nome:</label> <input type="text" id="" /><br />
<label for="email">Email:</label> <input type="text" id="" /><br />
<label for="masc">MASC:</label> <input type="radio" name="masc" /> <label for="fem">FEM</label> 
<input type="radio" name="sexo" id="fem" /><br />
<label for="news">Deseja receber nossa newsletter:</label> <input type="checkbox" /><br />
<label for="como">Como nos conheceu:</label> 
<select id="como">
   <option>Google</option>
   <option>Indicação de amigo</option>
   <option>Outros</option>
</select><br />
<label for="msg">Mensagem:</label> <textarea cols="7" rows="40" id="msg"></textarea>
<button type="submit">Enviar</button>
</form>

Resultado:

Bom pessoal, por hoje é só! No próximo tutorial continuamos a falar sobre formulários web. Até lá.

Abraços,
Diego.

Hoje invadimos o fantástico mundo dos formulários web. Com o uso de formulários podemos criar mecanismos de interação do usuário com o site, desde caixas de busca até complexas fichas de cadastro e compra de produtos. Usamos formulários o tempo inteiro: para fazer login, buscas, cadastros, compras e enviar mensagens via fale conosco. Quando enviamos emails ou scraps no Orkut, pesquisamos no Google, participamos de fóruns e chats, em todos esses momentos fazemos uso de formulários web. Portanto, fiquem de olhos abertos e estudem com atenção, porque o assunto é MUITO IMPORTANTE.

Características Gerais

Veja o formulário abaixo:

Podemos perceber que esse formulário é composto de duas partes: uma caixa de texto e um botão. Todo formulário é composto por elementos ou controles, e o usuário interagirá com esses controles seja digitando dados, subindo arquivos, escolhendo opções etc. A primeira coisa que vocês precisam aprender: todo formulário é marcado pelas tags <form></form>, e dentro dessas tags são inseridos os controles do formulário. A tag <form> exige alguns atributos essenciais para o seu bom funcionamento:

• ACTION: Declaramos a página de destino do formulário, ou seja o documento que receberá todos os dados inseridos pelo usuário. Essa página possuirá algum script, que verificará a consistência dos dados inseridos, e por fim enviará o formulário para seu destino (banco de dados, email etc.);
• METHOD: Define a forma como enviaremos o formulário, ou seja como os dados serão transmitidos. Admite dois valores GET e POST.

Qual é a diferença entre GET e POST?

No método GET, enviamos os dados do formulário como parte da URL declarada no atributo ACTION. Imaginem um formulário com um campo apenas: texto_busca. Declaramos o atributo ACTION com o valor “processa_form.php” (essa página receberá os dados do formulário, verificará se está tudo ok e executará uma ação). Quando o usuário clicar no botão de disparo do formulário, o mesmo será enviado para a página declarada na ACTION, e o valor digitado dentro da caixa de texto fará parte da URL. Ficará assim: processa_form.php?texto_busca=valor digitado pelo usuário.

Quando você acessa o site do Google, na verdade, está pedindo uma permissão ao servidor do site. Seu navegador faz uma requisição ao servidor, pedindo acesso, o servidor decide se você pode ou não ver o site. Em linhas gerais, a coisa funciona mais ou menos assim. No método POST, os dados do formulário são enviados em anexo à essa requisição ao servidor. Tais dados são enviados de forma oculta, podendo ser criptografados e tratados por outros mecanismos de segurança.

Ok, a diferença entre um e outro todos já sabem, mas qual deles devemos usar? Existem uma série de fatores relacionados ao trabalho do programador, o que não é do nosso escopo. Simplificando o problema: usamos GET para formulários que exijam rapidez e poucos requisitos de segurança, tais como formulários de busca; e para todo o resto (login, cadastro, fale conosco, compras online etc.), usamos POST.

Elementos de um formulário: INPUT

Vamos aprender a escrever nossos formulários web, e conhecer seus principais elementos.

Caixa de texto simples – input text

Quando fazemos uma busca no Google, digitamos algo naquela caixa de texto e clicamos no botão “buscar”, e aí acessamos a página de resultados. Simples assim, né? Pois então, aquela caixa de texto é obtida pela tag HTML <input type=”text” />. A tag <input /> cria um campo de formulário para entrada de dados, com o atributo TYPE podemos criar diferentes tipos de campos, e a caixa de texto simples é um deles. Veja como ficaria o código abaixo:

1
2
3

<form action="" method="post">
<input type="text" />
</form>

Resultado:

Reparem que todos os elementos de um formulário ficam dentro das tags <form></form>. Não podemos usar nenhum controle, fora dessas tags.

Checkbox – input checkbox

Checkbox são aquelas caixas de seleção, onde marcamos ou desmarcamos uma opção. São campos de entrada de dados, onde o usuário assinala os campos que deseja responder com “SIM”, e deixa em branco aqueles que deseja marcar com “NÃO”. Veja o código abaixo:

1
2
3

<form action="" method="post">
<input type="checkbox" />
</form>

Resultado:

Radio buttons – input radio

O controle input radio permite ao usuário escolher apenas uma, dentre uma lista de opções. Ao contrário do controle input checkbox, onde o usuário pode escolher vários itens dentro de uma lista. Veja o código abaixo:

1
2
3
4
5
6

<form action="" method="post">
<input type="radio" name="form" />
<input type="radio" name="form" />
<input type="radio" name="form" />
<input type="radio" name="form" />
</form>

Resultado:

* Estudaremos mais adiante o atributo NAME.

Campo oculto – input hidden

Podemos armazenar informações sobre o usuário em campos ocultos de um formulário. Esses campos não serão renderizados pelo navegador, e são de grande importância para qualquer sistema dinâmico (que utiliza alguma linguagem de programação). Veja o código abaixo:

1
2
3

<form action="" method="post">
<input type="hidden" value="valor do campo oculto" />
</form>

* Estudaremos mais adiante o atributo VALUE.

Caixa de texto para senhas – input password

Já perceberam que quando vamos digitar uma senha em qualquer site, ao invés de aparecer o texto digitado, surgem pequenos marcadores (normalmente bolinhas escuras e preenchidas)? Pois é, não seria nada legal digitar nossas senhas, para que qualquer um possa ver na tela do nosso monitor. Podemos criar campos de formulários específicos para digitação de senhas. Veja o código abaixo:

1
2
3

<form action="" method="post">
<input type="password" />
</form>

Resultado:

Campo para upload de arquivos – input file

Em muitas situações precisamos anexar arquivos aos nossos formulários (uma foto, um arquivo de texto, uma planilha etc.). Nesses casos, sempre há um caixa de texto com um botão embutido, e ao clicar nele podemos escolher um arquivo qualquer em nosso computador, para fazer um upload. Para criar esse campo, basta seguir o código abaixo:

1
2
3

<form action="" method="post">
<input type="file" />
</form>

Resultado:

Botões – input submit e reset

Podemos também criar botões para enviar formulários, ou simplesmente apagar seus dados. Veja o código abaixo:

1
2
3
4

<form action="" method="post">
<input type="submit" value="ENVIAR" /> 
<input type="reset" value="LIMPAR" />
</form>

Resultado:

Bom pessoal, por hoje finalizamos! No próximo tutorial vamos terminar a lista de elementos de um formulário. Bom estudo e até lá!

Abraços,
Diego.

Olá Pessoal,

Estamos iniciando nosso minicurso de HTML, onde abordaremos os principais tópicos dessa linguagem essencial para quem trabalha com internet. Hoje em dia todo mundo que trabalha na nossa área precisa aprender um pouco de HTML: redatores, jornalistas, designers, publicitários, profissionais de marketing, programadores, gerentes de projeto etc. Não importa se você precisa aprender o básico para montar o layout de um texto, ou ter noções avançadas para dominar uma ferramenta web do seu trabalho, configurar newsletters, desenvolver sites, hotsites, portais e todo e qualquer tipo de sistema web, esse tutorial irá introduzí-lo no fantástico mundo do desenvolvimento web.

Se você é aluno de algum curso técnico (WebDesigner, Programador Web etc.), ou está estudando para trabalhar nesse ramo, enfim, se você é um iniciante e não sabe por onde começar, me permita ajudá-lo: comece por aqui! Acompanhe o be-a-bá do HTML e a partir desse minicurso avance para outras áreas. Programação, PHP, banco de dados, JavaScript, CSS tudo isso vem depois. Vamos começar aqui uma jornada rumo ao desenvolvimento de sites completos e funcionais.

Lembrando que essa é o conteúdo que ministro em minhas turmas de WebDesigner e Programador Web, no SENAC e outros cursos. Portanto, o conteúdo tende ser o mais atualizado possível, assim como didaticamente separado e estruturado.

O que é HTML, afinal de contas?

HTML ou HyperText Markup Language é uma linguagem de marcação, utilizada para construir a camada visual de páginas web. Sua função é dar um valor semântico e estruturar todo o conteúdo de um documento. Toda vez que você abre o seu navegador e acessa algum site, o que você está vendo na verdade é um punhado de código HTML interpretado pelo browser, e convertido em formas, cores, gráficos e vídeos. Podemos dizer que o HTML é a linguagem por detrás de um site, é o que define o conteúdo visualizado na tela. Com HTML podemos definir o que é um conteúdo: parágrafos, listas, links, imagens, vídeos, tabelas, colunas etc. Toda linguagem de programação web interage com HTML, por esses motivos todo profissional que se preza (redatores, designers, programadores etc.) conhece bem a sua sintaxe. Não é exagero dizer que o HTML é a base de tudo, o ponto inicial da sua carreira futura.

Ok, entendi que HTML é importante demais! Mas… como funciona?

Trabalhar com HTML é bem simples, como vocês verão nos próximos dias. Essa linguagem de marcação baseia-se em etiquetas com valor semântica, englobando trechos de conteúdo dotando-os de sentido e valor. Essas etiquetas são chamadas <strong>tags</strong>. Uma tag nada mais é do que um comando HTML com um ponto inicial (abertura) e um ponto final (fechamento). Quando digitamos um texto no Word, por exemplo, para criar um parágrafo, simplesmente apertamos a tecla ENTER. Em HTML não é tão simples assim, é preciso especificar via código que queremos um parágrafo em dado lugar; precisamos também dizer onde começa e onde termina esse parágrafo. Veja abaixo como funciona:

<paragrafo>Conteúdo do parágrafo 1…</paragrafo>
Conteúdo fora do parágrafo…

Perceberam que um pedaço do texto está entre <paragrafo></paragrafo>? Esse texto formará um parágrafo, enquanto todo o resto do conteúdo ficará de fora. Tá, mas por que os símbolos <> e </>. É o seguinte: toda tag possui a seguinte sintaxe – <nome_da_tag>… Conteúdo a ser etiquetado…</nome_da_tag>, onde delimitamos um início para tag (<>) e um fim (</>). Chamamos isso de tag de abertura e tag de fechamento. O HTML possui dezenas de tags com nomes diferentes. A nomenclatura das tags é algo bem fácil de lidar, pois os nomes sempre tem a ver com a funcionalidade do comando. Por exemplo: <p></p>são tags de parágrafo; <table></table> correspondem a tabelas; <form></form> corresponde a formulários, e por aí vai.

Eu ouvi falar de um tal XHMTL… Que raios é isso? É HTML também?

No princípio era o caos… Desenvolver um site há uns 10 ou 15 anos era um inferno. Não tínhamos padronização, folhas de estilo em cascata (vamos estudar isso), cada navegador interpretava o mundo do seu jeito, são tempos ruins que devemos esquecer. Naquele período não havia regulamentação e padronização de desenvolvimento, e por conseqüência o próprio HTML era meio zoneado. Usava-se HTML para tudo: marcação de conteúdo (sua finalidade real), estilização, diagramação etc. E conforme a web foi evoluindo, novas tecnologias surgiram e o HTML velho de guerra apresentou uma série de limitações frente às novas necessidades. Por esse motivo refizeram o HTML de acordo com o padrão XML, uma linguagem de marcação rígida, compatível com qualquer sistema: surgiu então o XHTML (XML + HTML). O novo formato apresentava a rigidez sintática do XML, assim como sua compatibilidade, e a linguagem ganhava novos horizontes. XHTML então é uma versão reformulado do velho HTML, dentro do padrão XML de marcação. É uma melhoria. Outra vantagem a ser assinalada: marcações XHTML são compatíveis com aplicações XML (usadas a torto e direito nos sistemas web modernos).

Não se preocupem: aqui aprenderemos marcação XHTML, que é muito parecido com o velho e bom HTML de guerra.

Ainda não estou satisfeito… Quais são as reais diferenças entre HTML e XHTML?

Ok, caro estudante… Você tem que perguntar mesmo! O HTML por não ser padronizado, admitia uma série de falhas e inconsistências. O XHTML é muito rígido, e não deixa passar nenhum erro. Por esse motivo somos obrigados a ter atenção com algumas regrinhas básicas:

Documentos em XHTML devem ser bem formatados

Os navegadores tentam resolver erros e inconsistências em páginas HTML, e cada um faz alterações conforme sua lógica interna. Nem é preciso dizer que isso não pode dar certo… Em XHTML não são permitidos erros de sintaxe, tags sem fechamento, aninhamento inconsistente etc.

Tags devem ser escritas em letras minúsculas

XHTML é o que chamamos de linguagem case-sensitive, ou seja: diferencia letras maiúsculas de minúsculas. Em uma linguagem case-sensitive “BRASIL” é diferente de “brasil”, apesar da grafia ser a mesma, pois o tipo de caixa (alta e baixa) varia. Todas as tags e atributos XHTML usam letras minúsculas, em resumo: nada de escrever <P></P>…

As tags devem ser aninhadas corretamente

Uma coisa importante sobre o uso de tags em HTML: se você usa várias tags aninhadas (uma dentro da outra) na sua marcação, é importante respeitar a ordem de abertura e fechamento de tags – a primeira tag a ser aberta é a última a ser fechada, a segunda tag é a penúltima e por aí vai…

OK – <p><strong>Texto</strong></p>
ERRADO – <p><strong>Texto</p></strong>

É obrigatório o uso de tags de fechamento

No HTML algumas tags como <p>, <br> e <li> dispensam o uso da tag de fechamento. Legal, mas isso no HTML. O padrão XML (do qual o XHTML é derivado) diz claramente: TODA TAG OBRIGATORIAMENTE DEVE SER FECHADA. Como diz aquele comentarista esportivo: “a regra é clara”… Existem algumas tags que não possuem par de fechamento, são o que chamamos de elementos vazios. Esse tipo de elemento precisa ser fechado na própria tag de abertura, e sua estrutura é a seguinte: <nome_da_tag />

Veja algumas tags que podem ser fechadas no comando de abertura:

<br /> – Força quebra de linha
<img /> – Insere uma imagem
<input /> – Coloca um campo de formulário (entrada de dados)

Tá… Você me convenceu: quando começamos a brincar com HTML?

Bom, chega de papo introdutório e vamos por a mão na massa. Todo mundo aqui já entendeu o que são tags, como elas funcionam e para o que servem. Para fechar esse post vamos conhecer as primeiras tags HTML, formando o que chamamos de estrutura básica de uma página web. O browser/navegador (Internet Explorer, Firefox, Opera, Safari etc.) é um dispositivo que usamos para acessar a internet e navegar pela web a fora, ele é capaz de interpretar código HTML, CSS, JavaScript, applets Java, XML e mais algumas coisas. Os códigos são interpretados e juntos geram as páginas web que visitamos. Mas precisamos ajudar o navegador a diferenciar código HTML de CSS ou qualquer outra linguagem. Por isso temos tags específicas para marcar cada tipo de código. Por exemplo, para criar uma página web precisamos dizer ao browser qual é a linguagem usada, e se for um documento HTML/XHTML iremos utilizar a tag <html></html>. Toda a página deve ficar entre essas tags, e o navegador não irá considerar qualquer código fora dessas etiquetas. A idéia é mais ou menos essa:

<html>
Aqui entra todo o conteúdo da página web…
</html>

Todo documento HTML é dividido em duas partes: cabeçalho e corpo. No cabeçalho colocamos todas as informações referentes a página, mas que não serão exibidas na tela do usuário; no corpo colocamos o site propriamente dito, ou seja todo o conteúdo a ser visualizado no navegador do usuário. Essa divisão entre cabeçalho e corpo é efetivada pelo uso das tags <head></head> e <body></body>. Nossa página ficará da seguinte forma:

<html>
<head>
Aqui entram informações sobre o documento, mas que não serão visualizadas pelo usuário
</head>
<body>
Aqui entra todo o conteúdo do documento, ou seja a página propriamente dita…
</body>
</html>

O corpo da página é a parte mais fácil de compreender. Todos já perceberam que os parágrafos, imagens, tabelas, listas, vídeos, formulários e qualquer outro tipo de conteúdo do site, ficarão dentro das tags <body></body>. Mas e o cabeçalho?

“Informações sobre o documento que não serão visualizadas pelo usuário” é um tanto vago e abstrato para a maioria de vocês. Na verdade não adianta me prolongar em explicações sobre o tipo de conteúdo do cabeçalho, pois vocês precisam pegar alguma experiência primeiro. Só para exemplificar: dentro do cabeçalho colocamos o título da página, aquele texto no topo do seu navegador (na barra de títulos); meta-tags – informações gerais sobre o documento como o autor, idioma, padrão de codificação, palavras-chave (termos que indiquem do que trata o conteúdo, por muito tempo foram o ponto alto da indexação de conteúdo no Google, sendo hoje ainda um fator relevante) etc.; links para outros documentos (arquivos com programação JavaScript, comandos de diagramação e estilização CSS etc.) etc. Prometo que conforme você prosseguir em seus estudos, tudo isso fará mais sentido e será mais fácil de entender.

Por enquanto vejamos como colocar um título no documento. Para inserir um título em sua página web, basta adicionar dentro cabeçalho (<head></head>) a tag TITLE (<title></title>). O conteúdo entre as tags aparecerá na barra de títulos (barra azul no topo do navegador) do seu browser. Veja como fica a nossa página:

1
2
3
4
5
6
7
8

<html>
<head>
<title>Minha primeira página web</title>
</head>
<body>
Conteúdo da minha primeira página web...
</body>
</html>

Para visualizar esse arquivo faça o seguinte: abra o bloco de notas; escreva a estrutura HTML acima (sinta-se à vontade para fazer suas modificações livremente); salve o arquivo com o nome minhaPrimeiraPagina, e ao invés da extensão .txt, troque por .html (isso é undamental, pois se você não alterar a extensão para .html, a página não será visualizada); agora dê um duplo clique em cima do arquivo que você acabou de salvar e… voi lá, você está visualizando sua primeira página HTML.

Bem pessoal, por hoje é só. No próximo post vamos conhecer novas tags, e aprender a criar títulos, parágrafos, quebras de linha e a formatar texto (negrito, itálico, sublinhado etc.). Até breve.

Forte abraço,
Diego.

PS: Já que o blog tem ajudado muita gente e tudo mais, eu me comprometi a atualizá-lo diariamente (ou quase). Mas, como eu tenho uma produtora web pra cuidar e dou aulas no SENAC, fica meio complicado encontrar tempo. Então vamos oficializar: eu vou sempre postar os artigos e tutoriais à noite ou de madrugada. Durante o dia não dá mesmo.