.!.
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:
- primeiro item da lista
- segundo item da lista
- 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. Testes do aluno Cristian indicaram que no Ie8 está ok). 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<sub>2</sub>SO<sub>4</sub> : H2S04.
a<sup>2</sup>= b<sup>2</sup>+c<sup>2</sup> : a2=b2+c2
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:
Cuidado: não considerar os tags e atributos marcados como DEPRECATED.
Dúvidas? vá para o fórum.
1
