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:
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.
[...] Sétima Aula: 20 de novembro | Blocos, Trechos e pouca Diagramação [...]
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.
Parabéns pelo site, após longa procura encontrei algo que é de graça e vale a pena!
No parágrafo bloco está escrito queremo .
algumas situações( queremo )definir blocos lógicos.
Obs: O site está perfeito e obrigado por ajudar!
Obrigado Fernando. Pelo elogio e pela correção. Já devidamente acertado.
[...] Blocos, Trechos e pouca Diagramação [...]
Eu de novo … bom conselho sobre este informação de rodrigo =D …
gostei mas pergunto de novo persizava de um professor php se alguem quiser me dar aulas por msn e guilherme_1995_@hotmail.com