Posts com a Tag ‘curso’

Aula 9: Introdução a Java

terça-feira, 4 de dezembro de 2007

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

Acabou a parte mais fácil do curso, vamos agora começar a programar. Mas antes disso uma introdução teórica de Java é interessante. Vamos a ela:

Java foi iniciado pela Sun no ano de 1990. James Gosling coordenou a equipe que a desenvolveu inicialmente. No início dos trabalhos o objetivo era desenvolver software para uso em eletrônicos de consumo.
Antes do lançamento os projetistas descobriram que Java era ótimo para a Internet. Tiveram a idéia de utilizar um recurso chamado Applet Java, que permitia que programas funcionassem inseridos (Embed) em páginas Web. Lançada em 1995, rapidamente a linguagem ganhou força como a linguagem para uso com a Internet.

Embora o uso de Applets parecesse interessante, a banda larga não era tão difundida como é hoje, e os links lentos impediam a carga dos programas com uma velocidade aceitável. Hoje em dia, estes Applets são usados para validação de senhas em alguns bancos. Veja que a segurança é um dos pontos extremamente fortes do ambiente Java.

Java acabou se transformando na linguagem mais badalada com a introdução do Jsp-Java Server Page, e dos frameworks como Struts, Hibernate e outros. e do J2ee. Isso permitiu que Java fosse realmente utilizado pelas grandes corporações desenvolver softwares de peso nesta linguagem que inicialmente era despretensiosa.

O principal diferencial de Java para as outras linguagens é sua independência de plataforma, embora seja compilada. Utilizando uma máquina virtual diferente em cada plataforma onde funciona, os programas em si depois de compilados podem ser transportados de um ambiente para outro sem modificações. E para ambientes diferentes eu quero dizer:

  • Processadores diferentes: x86, Sparcs, PowerPC, etc
  • Sistemas Operacionais diferentes: Windows, Linux, MacOs, Solaris, etc

Assim podemos desenvolver um programa para Windows que funciona em Linux, MacOs, etc.

Mas outras características importantes ainda estão presentes:

  • Orientação a Objeto
  • Alto nível
  • Tipos de dados Estáticos
  • Multithreaded
  • Extensível
  • Bem estruturada
  • Acesso a banco de dados

Em Java escrevemos o código em um editor de texto sem formatação, como o bloco de notas do Windows e salvamos o arquivo com a extenção *.java. Usamos o compilador javac para obter o programa executável *.class. Os arquivos .class não possuem código executável (bytecode) para o processador do ambiente de desenvolvimento, como acontece com os arquivos executáveis de outras linguagens. Os códigos são bytecodes para uma Máquina Virtual Java (JVM). Para executá-lo usamos o lançador de programas java que aciona a Máquina Virtual para executar o programa.
O JVM por sua vez traduz os bytecodes java para o processador específico onde está sendo executado o programa.

A plataforma Java inclui além da Linguagem de Programação e da Java Virtual Machine JVM, a API – Biblioteca de Classes.
Esta biblioteca possui um grande conjunto de Classes que implementam várias ferramentas necessárias para os programadores. A maior parte das implementação do Java estão na biblioteca.
O aprendizado da linguagem Java é extremamente rápida, mas devido à amplitude da biblioteca, é necessário muita pesquisa para não tentar reinventar a roda a cada programa desenvolvido.

Na próxima aula iremos começar realmente a programar em Java, escrevendo muito código.

Antes de terminar esta aula no entanto instale o seu ambiente de desenvolvimento Netbeans que eu recomendo para as aulas seguintes. É necessário uma máquina razoável (>1Ghz) e 512Mb de memória para ficar confortável. Porém já vi funcionando com menos.

E vamos fazer um teste para ver se está funcionando:

  • Abrir o Netbeans e acionar o menu Arquivo/Novo Projeto;
  • Uma janela chamada “Novo Projeto” abrirá. No canto esquerdo tem a identificação do passo em que estamos;
  • No passo 1: Selecionar Geral / Aplicação Java , clicar no botão Próximo ;
  • Passo 2: Definir o nome da aplicação. Use “AppAloMundo”. (maiúscula e minúscula é importante em Java, nunca se esqueça disso). Defina a pasta onde vai salvar a aplicação e o nome da classe principal: “appalomundo.AloMundo” e clique em finalizar; Faça exatamente como eu estou pedindo a primeira vez, depois se quiser repetir é por sua conta;
  • Automaticamente o Netbeans irá criar os diretórios necessários e arquivos para sua aplicação;

Com o projeto pronto para uso, modificar o código de AloMundo.java para:

public class AloMundo {
         public static void main(String[] argv){
               AloMundo objeto=new AloMundo();
         }

         /** Creates a new instance of AloMundo */
         public AloMundo() {
               System.out.println("Alô mundo!");
         }
}

Salve o arquivo e execute a classe com a tecla <F6> ou com o menu Executar/Executar Projeto Principal.

O resultado, se tudo der certo, será uma aba conforme a imagem abaixo:

Netbeans Hello World

Veja após a saída “run:” o resultado da execução do seu programa. Simplesmente Alô Mundo!

Não deixe para depois, antes da próxima aula consiga com todas as suas energias chegar a este ponto de funcionamento do Netbeans (ou de sua ferramenta escolhida). A próxima aula iremos fazer muitos testes e será altamente recomendado que esteja tudo de acordo.

Na Seqüência

  • dia 11 de dezembro: todos os fundamentos, rápido e direto!
  • dia 18 de dezembro: orientação ao objeto.

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

Como o curso terminou a primeira fase, gostaria de saber quem ainda esta acompanhando a aulas. Em uma espécie de chamada deixem um recado no comentário desta mensagem. Agradeço de antemão.

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

Tags:, ,
Publicado em Aula CPWJ, Programação para Internet | 62 Comentários »

Oitava Aula: Diagramação Css

terça-feira, 27 de novembro de 2007

Sejam bem vindos, esta é a oitava 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 como lidar com blocos e trechos xHtml e com bordas, margens e preenchimento. Hoje iremos ver o uso de background, ou pano de fundo e como usar tudo isso para diagramação de sua página.

Background

Os parâmetros background permitem definir como será o comportamento do fundo de um bloco. O fundo inclui a área de conteúdo e o preenchimento (padding). É possível definir uma cor para o fundo, ou preencher o fundo com uma figura. Esta figura pode ser repetida por toda a área ou de outras maneiras. Vamos definir um bloco para realizar os testes:

<body>
<p>este é o bloco de teste</p>
</body>
</html>

E em style definir algumas características:

<style type="text/css">
p {
  padding: 40px;
  margin: 50px;
  heigth: 200px;
  width: 300px; }
</style>

Pronto assim teremos uma caixa para aplicar os padrões de fundo. Vamos testar primeiro a cor de fundo:

p{
  background-color: #ccc;  /* cor de fundo cinza */
}

Nada mais simples. Agora vamos usar uma figura de fundo. Arrume uma imagem *.gif ou *.jpg e copie para o mesmo diretório do arquivo Css. É possível aplicar um padrão repetido por todo o bloco usando:

p{
background-image: url(“nome do arquivo.jpg”);
}

Se quizer controlar como será a repetição:

background-repeat: no-repeat;  /* a imagem somente uma vez */
background-repeat: repeat-y;  /* a imagem repete na vertical */
background-repeat: repeat-x;  /* a imagem repete na horizontal */
background-repeat: repeat;  /* a imagem repete na vertical e horizontal (padrão) */

Um efeito interessante é manter o fundo fixo quando rolamos a página:

background-attachment: fixed;
background-attachment: scroll; /* rola de forma padrão */

Quando não repetimos a imagem por todo o fundo, podemos posicionar o local onde a imagem irá se apresentar:

background-position: x-pos y-pos ; x-% y-% ; top left ; top center ; top right ; center left ;
center center ; center right ; bottom left ; bottom center ; bottom right ;

Exemplos

Para mostrar uma imagem de fundo exatamente no meio do bloco de modo:

 p{
  background-image: url(“nomearquivo.gif”);
  background-repeat: no-repeat;
  background-position: center center;
}

Como os outros parâmetros podemos escrever um grupo de opções de uma vêz só:

 p{
  background: url(“nomearquivo.gif”) no-repeat center center fixed;
}

As opções podem vir em qualquer ordem e pode-se omitir qualquer uma delas.

Parâmetro Float

Os blocos ‘div’ se comportam exatamente como os parágrafos ‘p’. Quando colocamos um parágrafo na página e definimos uma largura menor que a largura da página é evidente que sobrará espaço a direita do bloco. Veja a figura abaixo:

bloco1

Digamos que o bloco em azul claro é o fundo do navegador, e os blocos amarelo e verde são dois parágrafos. Usamos Css para definir o parágrafo amarelo e o bloco verde com largura 100px:

#paragrafoamarelo, #paragrafoverde { width:100px; }

Mesmo existindo espaço para os dois parágrafos ficarem lado a lado, como são blocos eles terminam com quebra de linha e o bloco verde continua abaixo.
O parâmetro float permite que um parágrafo simplesmente não quebre a linha no final. O comportamento é de flutuação. O bloco pode ser colocado a esquerda e o restante vai contornar conforme a figura:

bloco2

Aqui o bloco amarelo possui os seguintes parâmetros:

#paragrafoamarelo{
   width: 100px;
   float: left; /* flutuando a esquerda */
}
/* e o verde: */
#paragrafoverde{
width:100%; /* parágrafo verde ocupando toda a largura da página */
}

Para colocar os dois parágrafos um ao lado do outro:

#paragrafoamarelo{
  width: 100px;
  float: left; /* flutuando a esquerda */
}
/* e o verde: */
#paragrafoverde{
   width:100px;
   float:left; /* flutuando a esquerda */
}

Diagramação com Css

Vamos falar um pouco sobre diagramação com Css. Como exemplo vamos tomar o código xHtml proposto na última aula com algumas modificações:

…
<body>
<div id=”tudo”>

<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>  <!-- fechando titulopagina -->

 <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>  <!-- fechando menu -->

<div id=”conteudo”>
<h2>Conteúdo principal da página</h2>
…
</div> <!-- fechando conteúdo -->

 <div id=”rodape”>
<h2>Feito por Luís Eduardo</h2>
…
</div> <!-- fechando rodapé -->
</div> <!-- fechando tudo -->
</body>

E vamos planejar um modelo de diagramação desejado:

bloco3

Como já expliquei várias vezes, o conteúdo do curso é uma apresentação sobre os assuntos. Material detalhado está na web, e já indiquei vários lugares. Vamos fazer esta diagramação acima explicando cada detalhe e depois é por conta de vocês.

Vamos considerar algumas escolhas:

  • A largura total da página será fixa e com 758px. (exato para não aparecer a barra de rolagem inferior em tela com resolução 800×600)
  • A altura dependerá do conteúdo.
  • A barra lateral em amarelo terá 250px
  • O título com altura de 200px;
  • O rodapé terá altura 40px;

Vamos lá Css com as medidas:

#tudo {
  width : 758px;
  background-color: #ffcccc;
}
#titulopagina {
  height : 200px;
  background-color: #00ff00;
}
#menu {
  width : 250px;
  margin: 2px;
  background-color:yellow;
}
#conteudo {
  width : 498px; /* 758px- 250px -10px (margens dos blocos) */
  margin: 2px;
  background-color: orange;
}
#rodape {
  height : 40px;
  background-color: red;
}

Isso fará com que todos os blocos estejam na medida correta, porém um abaixo do outro. Para acertar os blocos no lugar iremos acrescentar o float no conteúdo e no menu:

#menu { ...
  float:left;
  ...
} /* e  */
#conteudo {...
  float:right;
  ...
}

Isso colocará os blocos menu e conteúdo lado a lado. Porém o comportamento do rodapé ainda será errado. Teste no Firefox e no Iexplorer e veja por si mesmo. Para corrigir isso utilize o parâmetro Clear, que proíbe qualquer conteúdo ao lado de um bloco:

#rodape {...
  clear: both; /*proíbe conteúdo a direita e a esquerda do rodapé, fazendo ele ir para baixo */
  ...
}

Ainda temos alguns probleminhas como ajustes de padding dos blocos e as cores de fundo que não se espandem para baixo no menu e conteúdo, eliminar os pontinhos no menu, centralizar o layout, etc.

body {
  margin : 0px 0px;
  text-align:center;
}
#tudo {
  text-align : left;
  ...
}
#menu *, #conteudo * {
  padding: 0 6px;
}
#menu ul li {
  list-style-type:none;
}

Acabou a primeira parte do curso gente, cansei de falar de html, css. Agora fiquem com os especialistas desta área: o Diego Eis do http://www.tableless.com.br e Maurício Samy do http://www.maujor.com. E claro, os cursos web mais completos (infelizmente em inglês) em http://w3schools.com/.

Na próxima aula iremos falar de Java. Uma aula bem teórica, mas é importante saber com o que estaremos lidando.

Aprofundando

Estude alguns outros modelos de layout em:

Na Seqüência

  • dia 4 de dezembro: Vamos falar de Java, aula introdutória.
  • dia 11 de dezembro: todos os fundamentos, rápido e direto!
  • dia 18 de dezembro: orientação ao objeto.

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

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

Tags:, , , ,
Publicado em Aula CPWJ, Programação para Internet | 4 Comentários »

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

terça-feira, 20 de novembro de 2007

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

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.

Tags:, , , ,
Publicado em Aula CPWJ, Programação para Internet | 8 Comentários »

Sexta Aula: texto, fontes e seletores Css.

terça-feira, 13 de novembro de 2007

Sejam bem vindos, esta é a sexta 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 o que é e como utilizar Css de acordo com o Web Standard. Hoje vamos ver muitas possibilidades de formatação com textos e fontes.

Parâmetros Text

Vamos colocar nosso texto sob controle? Similar à formatação de Parágrafo do Word, vamos começar vendo uma lista de parâmetros que modificam a aparência do texto:

  • direction: direção do texto.
    Valores: ltr e rtl, respectivamente esquerda para direita e direita para esquerda
  • line-height: distância entre linhas.
    Valores: “normal”, numérico, ou porcentagem
  • letter-spacing: espaço entre caracteres.
    Valores: “normal” e numérico.
  • text-align: alinhamento texto.
    Valores: left, right, center e justify.
  • text-decoration: Modificadores para “decoração”.
    Valores: none (não apresenta decoração), underline (sobrelinha), overline (uma linha acima), line-through (texto riscado) e blink (piscante, use com moderação)
  • text-indent: identação da primeira linha do bloco.
    Valores: numérico e porcentagem.
  • text-transform: coloca texto em maiúscula ou minúscula.
    Valores: none, capitalize (primeira letra maiúscula e restante minúscula), uppercase (maiúscula) e lowercase (minúscula)
  • white-space: define como o espaço entre as palavras dentro de um bloco é gerenciado.
    Valores: “normal” (padrão do xhtml), pre (permite repetir espaços e respeita enter e outros), nowrap (não quebra a linha automaticamente)
  • word-spacing: aumenta ou diminui o espaço entre palavras.
    Valores: “normal” ou numérico.
Exemplos:
p {
text-indent: 20px; /* 20pixels */
}

h1,h2,h3,h4 {
word-spacing: 1.4em; /* 1,4 vezes a largura de uma letra */
letter-spacing: 0.3em; /* metade da largura de uma letra */
text-align: center;
}

Parâmetros Font

  • color: Cor da fonte. Veja como definir as cores abaixo em aprofundando.
  • font-family: definir uma lista com o nome da fonte utilizado ou um nome de família genérica.
    Valores:

    • nome da fonte. Usar aspas em caso de nomes compostos “lucida console”.
    • nome de uma família genérica: serif, sans-serif, cursive,fantasy e monospace.
  • font-size: tamanho da fonte
    Valores: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, numérico e porcentagem.
  • font-style: estilos da fonte
    Valores: normal, italic, oblique.
  • font-weight: Define a força do negrito.
    Valores: “normal”, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • font-variant: define as letras em maiúsculo.
    Valores: small-caps;
  • *font: define vários dos elementos acima ao mesmo tempo, veja o exemplo “h1″.
Exemplos:
body {
font-family: courier, serif;
color: black;
}

p {
font-family: arial, "lucida console", sans-serif;
font-weight: bold;
font-style: italic;
font-size: 12px;
}

h1{
font: italic 900 22px arial,"lucida console",sans-serif;
}

Seletores

Até agora nós indicamos que é possível modificar o comportamento de qualquer tag padrão xhtml.

Indicamos exemplos de como modificar todo o conteúdo da página (usando body), os parágrafos (usando p) e os títulos (usando h1, h2, etc).

Porém existem situações que desejamos modificar um único parágrafo, um título apenas da página, ou um grupo de parágrafos. Para executar esta tarefa existem dois parâmetros que podemos incluir nos tags xHtml: id e class.

  • id: identificar de um elemento único na página. É como um Rg de um elemento de página, e justamente por isso não pode ser repetido.
<table id="Receitas">
...
</table>

<table id="Despesas">
...
</table>
  • class: identificador de pertença a um grupo de elementos. É usado para classificar um tag como pertencente a um grupo. Um tag pode ser identificado como parte de um único grupo de elementos.
<p>Parágrafo comum</p>
<p class="pergunta">Este é um parágrafo com uma pergunta</p>
<p class="resposta">Este é um parágrafo com uma resposta</p>
<p class="pergunta">Este é um parágrafo com outra pergunta</p>
<p class="resposta">Este é um parágrafo com outra resposta</p>

Uma vez definido a “class” ou “id” é posível aplicar um Css diretamente a eles. Para class use o caracter “.”:

.pergunta {
color: #ccc;
word-spacing: 1.2em;
}

.resposta {
background-color:#ccc;
color: #fff;
}

E para id usamos o caracter “#”:

#receitas {
color:#fff;
background-color:#000;
}

#despesas {
color:#OOO;
background-color:#FFF;
}

Eventualmente o mesmo tag pode ser identificado por um id e fazer parte de um class:

<p id="principal" class="resposta">Esta é a "principal" resposta.</p>

Neste caso os Css de #principal e .resposta serão aplicados, com prioridade para #principal.

Exercícios

  • Retomar os exercícios da última aula, aplicando os novos conceitos.

Aprofundando

Na Sequência

  • Blocos, trechos e Diagramação.

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

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

Tags:, , , ,
Publicado em Aula CPWJ, Programação para Internet | 1 comentário »

Página 1 de 4 1 234