Sétima Aula: Blocos, Trechos e pouca Diagramação

« O Cometa 17p Holmes está se apagando.
Programa Constellation: retornando a Lua, e além. »

nov

Publicado 18:44, 20 novembro , 2007 por Prof. Luis Eduardo

Sejam bem vindos, esta é a sétima aula de Programação Web em Java, para saber mais sobre o curso, começe em Curso de Programação Web em Java - CPWJ.

Na última aula estudamos as muitas possibilidades de formatação com textos e fontes, e nesta aula iremos aprender sobre blocos e trechos em xHtml e como usá-los para implementar diagramação Css.

Tags de Bloco e de Trechos (block e inline).

Quanto à diagramação, existem dois tipos de tags disponíveis: tags de blocos e tags de trechos. (block e inline)

Os tags de blocos tem o comportamento de parágrafos. Possui implícito uma quebra de linha ao final e pode ser usado diretamente no corpo do documento ‘body’. (desde que não seja parte de uma lista ou tabela)

Alguns exemplos de tags de bloco: p, ul, ol, li, table, tr, td, tr, th, etc.

Os tags de trechos (em inglês inline) devem estar definidos dentro de um bloco necessariamente. Tem o comportamento de uma parte de parágrafo, como uma palavra ou frase e não executam uma quebra de linha.

Alguns tags inline: i, strong, em, img, etc.

Margens, espaçamento, larguras e bordas

Cada bloco definido por um par de tags (<p>… </p>, ou <img… />) tem um conjunto de opções de aparência de bloco customisáveis com Css: marging, padding, height, width, border.

Vejamos a figura abaixo:

Box Model Css

Neste bloco as medidas referem-se a :

A Margin: Margem transparente com a separação de um bloco e o bloco vizinho.
B Padding: preenchimento ou espaçamento interno do bloco. Espaço entre o conteúdo do bloco, no caso o parágrafo e a borda.
C Border: Largura da borda.

Além destas medidas, temos ainda a altura (height) e a largura (width), medidas dentro da área com texto na figura. Isso é, a área em azul menos o espaço sem texto (padding). Portanto a largura total visível do bloco é width+2*padding+2*border. O Internet Explorer 6 quando o doctype é Html transitional apresenta a largura de forma incorreta, use sempre Html Strict para evitar problemas. As versões mais antigas devem ser substituídas!

Todas estas opções são configuráveis para cada um dos 4 lados do bloco individualmente: top, left, bottom, right. Assim:

p{ margin-top: 15px; margin-right: 10px; margin-bottom: 20px; margin-left: 12px;
padding-top: 10px; padding-right: 12px; padding-…
border-width-top: 10px; border-width-left: 12px;
… etc
}

Pode-se também configurar em conjunto:

p{
margin: 15px 10px 20px 12px; // define na següência: topo, direita, base, esquerda, no sentido do relógio.
padding: 10px 12px; // define topo e base como 10px e laterais como 12px
border-width: 20px; // toda borda com 20px de largura
}

Para as bordas temos ainda estilo e cor:

p {
border-width: 10px 12px; //borda 10px de largura no topo e base e 12px nas laterais
border-style: solid; // borda cheia para todos os lados.
border-color: red;
}

As opções para estilo de borda são:

dotted – série de pontos,
dashed – tracejados,
solid – linha contínua,
double – duas linhas sólidas,
groove – uma linha em baixo relevo
ridge – uma linha em alto relevo
inset – simula o bloco todo inserindo na tela
outset – simula o bloco todo saltando para fora da tela

Recomento testar todas as opções para que você veja o efeito de cada uma delas.

Já para a largura da borda (width) além das medidas em pixels (px) ou caracteres (em), temos as opções abaixo:

thin: fina
medium: média
thick: grossa

As opções das bordas podem ser definidas em conjunto:
seletor { border: cor estilo largura;}

h1{
border: black solid thick;
}

Blocos

Com estas opções, podemos controlar a aparência de qualquer bloco de xhtml. No entanto em algumas situações queremos definir blocos lógicos formados por vários parágrafos e outros objetos.

Para isso existe o tag ‘div’. Com o comportamento padrão exatamente igual a um parágrafo, gerando uma quebra de linha após o ‘/div’.

O principal uso é delimitar os pedaços da página definindo blocos lógicos semânticos:

…
<body>
<div id=”titulopagina”>
<h1>Título da Página</h1>
<h2>Descrição da página parte do título</h2>
<p>Autor: Luís Eduardo. Também parte do título</p>
</div>
<div id=”menu”>
<h2>Menu de opções:</h2>
<ul >
<li class=”impar”>Opção 1</li>
<li>Opção 2</li>
<li class=”impar”>Opção 3</li>
<li>Opção 4</li>
<li class=”impar”>Opção 5</li>
</ul>
</div>
<div id=”conteudo”>
<h2>Conteúdo principal da página</h2>
…
</div>
</body>

É praticamente obrigatório o uso da propriedade ‘id’ no tag ‘div’, pois só assim é possível modificar alguma aparência em CSS.

#menu {
margin: 10px, 20px;
padding: 5px, 10px;
border: dotted 3px #FCC;
}

Para mudar o comportamento de um tag somente para um dos blocos, basta combinar o id do bloco com o tag a ser modificado:

#menu h2 { font-size: 20px;
color: red; } // define cor vermelha e tamanho 20px para título 2 no bloco menu

#titulopagina h1 { color: blue } //define cor azul para título 1 no bloco titulo pagina

#titulopagina h2 { font-size: 20px;
color: red; } // define cor vermelha e tamanho 20px para título 2 no bloco menu, desta forma o h2 no bloco ‘menu’ será diferente do h2 no bloco ‘titulopagina’.

E aqui algo mais complicado, usando a mesma lógica:
#menu li { color: #000000; } //define cor preto para ítem de lista no menu.
#menu li.impar { color: #cccccc; } //define cor cinza para ítem de lista de classe impar no menu.

Trechos (spam)

Assim como usamos ‘div’ para definir blocos, usamos ’spam’ para definir trechos internos aos bloco.

Este tag é usado principalmente para definir um destaque diferente para um trecho de código interno a um parágrafo.

<p>Este é um parágrafo como outro qualquer. O custo de produção foi <span class=”dinheiro”>R$ 100,00</span>. Embora seja um bom valor, melhor ainda foi o lucro de <span class=”dinheiro”>R$95,00</span>.</p>

Definido assim podemos escolher uma aparência para o “dinheiro”:

.dinheiro {
font-weight: bolder;
color: #eee;
}

Normalmente usamos ’span’ com o parâmetro ‘class’ e ‘div’ com o parâmetro ‘id’.

Diagramação

A aula está ficando muito longa, vou deixar a diagramação para semana que vem.

Aprofundando

Estude o Box Model no w3c: http://www.w3.org/TR/REC-CSS2/box.html
Estude todo o conteúdo de Fundamentos Css em http://www.maujor.com

Na Seqüência

dia 27 de novembro: Mais Diagramação e mais detalhes Css.
dia 4 de dezembro: Vamos falar de Java, finalmente!

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.

Comentários

Curso Gratuito de Programação para Web em Java | Tecnoclasta em 20 novembro, 2007 às 6:47 pm

[...] Sétima Aula: 20 de novembro | Blocos, Trechos e pouca Diagramação [...]

Rodrigo em 15 janeiro, 2008 às 7:04 pm

Olá Tecnoclasta
=)

Queria parabenizá-lo pelo curso de programação web. Sinceramente, foi o melhor material sobre o assunto que encontrei até o momento. Principalmente pela seqüencia de programações que você aborda.

Agora que já babei o ovo vou fazer uma pergunta ehehhe

Eu tava navegando pelo site “html dog” e o cara falava sobre usar atributos de widtt e height diretamente na tag img. Segundo ele, seria melhor pois o browser não teria que calcular o tamanho da imagem e assim carregaria mais rápido. Por exemplo:

o que você acha disso?

Um abraço!

Rodrigo

Tecnoclasta responde:
Minha opinião sobre as imagens é que devemos seguir os padrões web que eliminaram os parâmetros Width e Height para a versão Strict. É claro que otimizações para navegadores podem até melhorar a performance, mas eventualmente podem ter problemas com outros navegadores. Testar para ver o quanto isso poderia aumentar a performance seria interessante. Na minha experiência, parece altamente desprezível diante do tempo que a imagem leva para ser transportada pela Internet.

[Responder]

Fernando em 4 março, 2008 às 8:42 pm