Terceira Aula: Classificando o conteúdo

Sejam bem vindos, esta é a terceira aula de Programação Web em Java, para saber mais sobre o curso, comece em Curso de Programação Web em Java - CPWJ

Na última aula estudamos como montar uma página Xhtml de acordo com o Web Standard. Hoje vamos ver o que podemos colocar no body, isso é, o que é permitido fazer no conteúdo da página.

>>>>Parênteses >>>>>>>>

Amigo Web Designer presente no curso: fique atento. Estamos utilizando o padrão Web, ou Web Standard. Existem muitas vantagens em utilizar o padrão diante de todos os recursos despadronizados presentes nos navegadores mais utilizados pelo mercado. A principal é a facilidade de portar o código para vários outros navegadores mais simples, como os presentes em celulares, e outros equipamentos. Falaremos também sobre Tableless, pode começar lendo um FAQ.As regras de utilização de xHTML de acordo com o padrão é muito mais restrita. Então atenção aos detalhes.

<<<< Fecha parênteses <<<<

Voltando ao conteúdo. Em primeiro lugar, os tags permitidas no bloco body tem por objetivo indicar o tipo de informação ali colocada. Repetindo: explicar o tipo da informação.

Desde a versão 4.01 do HTML a aparência não é objetivo do HTML. Então esqueçam da aparência do documento neste momento. O que vamos fazer no (x)HTML é indicar o que é um bloco de texto de forma semântica. Para aparência usaremos CSS.

Um bloco de texto na página Html pode ser uma porção de coisas:

• Um parágrafo
• Um título
• Uma lista, ou um ítem de uma lista
• Uma citação
• Um endereço
• Código de programação
• Texto predefinido
• Texto enfatizado
• etc.

Observe novamente, todos estes indicadores são nomes de coisas lógicas em uma página html. Não indicam nunca a aparência. É claro que uma lista na sua cabeça tem uma determinada aparência. Mas em Xhtml indicar que um bloco de texto é uma lista, tem exatamente este objetivo: indicar que é uma lista. A aparência é conseqüência.

Vamos começar com as coisas simples.

Parágrafos

Em xHtml todo o texto corrido como este que estou escrevendo deve ser delimitado com o tag ‘p’. Desta maneira:
<p>Este é o primeiro parágrafo. Veja que uma frase na mesma linha não deve ser delimitada. Um parágrafo é diferente de uma frase, ok?</p>

<p>Veja que este é o segundo parágrafo. A aparência padrão de parágrafos já coloca um pequeno espaço entre parágrafos. Isso é configurável via CSS, aliás toda a aparência é.</p>

Títulos

As páginas Web são recheadas de títulos. Como estes títulos aí em cima: “Parágrafo”, “Títulos”, “Terceira Aula: Classificando o conteúdo”. Observe que existem títulos e subtítulos. No caso deste artigo, “Parágrafo” é um subtítulo de “Terceira Aula….”

Para permitir a construção de títulos e subtítulos o xHtml permite a utilização de até 6 níveis de títulos: ‘h1′, ‘h2′, ‘h3′, ‘h4′, ‘h5′ e ‘h6′. O nível 1 é para os títulos mais importantes da página e ou os outros devem ser usados para caracterizar subtítulos.

Neste site Tecnoclasta (http://www.tecnoclasta.com), por exemplo, o nome do site no topo da página tem título de nível 1: <h1>Tecnoclasta</h1>, os títulos dos artigos tem título de nível 2: <h2>Terceira Aula: Classificando o conteúdo</h2>, os títulos das sessões a direita, nível 3: <h3>Assine Tecnoclasta</h3>, e por fim os subtítulos dentro de um artigo tem nível 4: <h4>Parágrafos</h4>.

Observe que a hierarquia de títulos é construída de acordo com a importância relativa de cada uma das informações, não tem nenhuma relação com aparência. De novo: esqueça a aparência por enquanto.

Listas

Outro tipo de informação comum em uma página web são as listas. Listas existem dois tipos: numeradas e não-numeradas. As lista não numeradas usam dois tags ‘ul’ (unordered list) e ‘li’ (list item), respectivamente para delimitar a lista, e o ítem da lista. Para cada ítem da lista ele coloca um marcador, que pode ser uma seta ou bolinha. Assim:

<ul> use este para o ínício

<li>primeiro item da lista</li>
<li>segundo item da lista</li>
<li>terceiro item da lista</li>

</ul> e este para o fim da lista

Resultado:

• primeiro item da lista
• segundo item da lista
• terceiro item da lista

As listas numeradas automaticamente incluem números antes de cada ítem da lista. Funcionam igual a lista não-numerada. No exemplo anterior trocando ‘ul’ por ‘ol’ (ordered list) obteríamos:

1. primeiro item da lista
2. segundo item da lista
3. terceiro item da lista

Não é necessário digitar os números.

Listas de Definição

Em várias situações precisamos construir uma lista de definições, como num dicionário. Em uma lista de definições nós temos os termos a serem definidos e temos cada uma de suas definições. Para construir uma lista de definição temos 3 tags:

‘dl’

De definition list, delimita o início e fim da lista

‘dt’

Delimita cada um dos termos da lista

‘dd’

Delimita cada defininição da lista

A própria lista acima foi construída em forma de lista de definição. Veja o código:

<dl>
<dt>’dl’</dt><dd>De definition list, delimita o início e fim da lista</dd>
<dt>’dt’</dt><dd>Delimita cada um dos termos da lista</dd>
<dt>’dd’</dt><dd>Delimita cada defininição da lista</dd>
</dl>

Endereços

Indicar o endereço de um local:

<address>Este é meu endereço</address>

Citações

Quando citamos o texto de um livro, site ou mesmo uma frase de outro autor utilizamos a tag ‘cite’: <cite>Ser ou não ser, eis a questão.</cite>

Uma segunda maneira de fazer citações é utilizar o tag ‘q’ de quotation ou cotação. Este tag automaticamente <q>”coloca um texto entre aspas”</q>. Porém não é reconhecido pelo Internet Explorer (os testes do aluno Fábio Costa nem no IE7 funciona ). Portanto dê preferência ao ‘cite’ e ao ‘blockquote’.

Para blocos de citações mais longas com parágrafos inteiros temos ainda o tag ‘blockquote’. Observe que ele exige um ou mais blocos dentro:

<blockquote><p>Esta citação inclue mais de um parágrafo</p>
<p>Este é o segundo parágrafo da citação</p></blockquote>

Sem os tags ‘p’ dentro do blockquote o código não é validado.

Para os tags ‘blockquote’ e ‘q’ é opcional indicar quem é o autor da citação. Use o parâmetro ‘cite’:
<q cite=”Einstein”>A velocidade da luz é igual para todos os referenciais inerciais.</q>

O texto em ‘cite’ não é mostrado, mas fica armazenado para o robô dos sistemas de busca.

Código

Código de programação é um dos tipos de informação mais comuns em sites. Este site mesmo está repleto de códigos. Para indicar que algo é código temos o tag ‘code’:
<code>
for(i=0;i<10;i++){
System.out.println('contar até 10: '+i);
}
</code>

Ênfase e ênfase forte

Para destacar uma frase ou palavra no meio de um parágrafo temos duas opções: utilizar de ênfase ou de ênfase forte. Os tags são, respectivamente, ‘em’ e ’strong’:

<p>Isso é um parágrafo. Isso é <em>importante e deve ser destacado</em>. No entanto isso é <strong>ainda mais importante e deve ser ainda mais destacado.</strong></p>

Observe que a aparência padrão para ‘em’ é o itálico e ’strong’ é o negrito. Mas isso é o padrão e podem ser modificados via CSS. Textos enfatizados devem fazer parte de um parágrafo, ou outro tipo de bloco, como code, cite, etc.

Texto pré-tabulado

Para entender este ‘tag’, temos que aprender a forma que o navegador lida com espaços, enter e tabs. Estes caracteres são descartados, desprezados pelos navegadores e substituídos por um espaço. Assim uma porção de espaços, tabs e enters, viram um espaço:

Uma tabela digitada assim (pontos são espaços):

Nome……..n1……n2……média<enter>
José……….4,0…..5,0….4,5<enter>

Seria apresentada pelo navegador assim:

Nome.n2.n2.média.José.4,0.5,0.4,5

Para colocar textos com tabulação definida por espaços, utilizamos o tag ‘pre’. Exemplo:

<pre>
nome……..n1……n2……média<enter>
José……….4,0…..5,0….4,5
</pre>

Desta maneira iria funcionar conforme o esperado. Isso é, com os espaços e retorno de linha apresentados.

Sobrescrito e Subscrito

Para textos subscritos (subscribed) e sobrescritos (supercribed), temos respectivamente os tags ’sub’ e ’sup’:

H₂SO₄ : H₂S0₄.
a²= b²+c² : a²=b²+c²

Por hoje é só. Na próxima aula vamos lidar com links, tabelas e blocos, e por incrível que pareça iremos terminar XHTML. Formulários vai ficar para um momento mais adequado do curso. (quando vermos javascript).

Quero lembrar que o curso não tem intenção de esgotar o assunto com todos os detalhes, mas dar o pontapé inicial, e indicar material para aprofundamento. Fazer o básico bem feito, para conseguir acompanhar o vasto material disponível na net, esta é a visão.

Exercitando

• Para exercitar a matéria apresentada, vamos treinar a codificação copiando todo o conteúdo deste artigo para um editor de texto comum e montando uma página Xhtml. Esqueça por enquanto os links. Validar no validator do W3C.
• Se você tem algum site de sua autoria, refaça uma das páginas utilizando unicamente os tags apresentados nesta aula, e outros definidos nos dois links apresentados em aprofundando. Valide.

Aprofundando

Estudar o padrão do W3c:

• http://www.w3.org/TR/html401/struct/text.html
• http://www.w3.org/TR/html401/struct/lists.html

Cuidado: não considerar os tags e atributos marcados como DEPRECATED.

Dúvidas? vá para o fórum.

Procure os mais baratos Livros sobre a Web, Livros sobre Java, Livros HTML ou Livros JSP nas melhores lojas do Brasil.

Tecnoclasta ©2007-2025.