Contact
Browsing the archives for the programação tag.
Subscribe

CSS - propriedade Background

Jun 9, 2008
CSS, Web 2.0, programação
Vamos estudar hoje a propriedade background do CSS. Abra um documento no bloco de notas do windows, ou um editor de textos simples ( não use o word pois li em alguns sites que não funciona) e salve seu documento como estilo.css. Este documento é o nossa folha de estilo que vamos inserir as formatações para nossa pagina Html como vimos na ultima aula.

A propriedade background define a cor de fundo de um elemento, uma imagem para fundo e ainda se essa imagem será ou não repetida horizontalmente ou verticalmente.

Para linkar sua página HTML na página CSS basta digitar o seguinte código no cabeçário (Head) da página HTML:

<html>
<head>
<title>Meu documento</title>
<link rel=”stylesheet” type=”text/css” href = ” style / estilo. css” />
</head>
<body>

Background-color

A cor de fundo em uma página é definida pela seguinte sitaxe:

background-color:propriedade

onde propriedade é igual a :

#FFFFFF Código hexadecimal da cor
rgb(255,235,0) Código rgb
Red , blue, green Nome da cor
Transparent Tranparente

È mais comum se utilizar o código hexadecimal das cores A tabela de cores em hexadecimal você pode ver neste site. Ao colocar na página basta digitar o código:

body {

background-color:#6AAD6A

}

e executar a página em html que a cor de fundo entrará automáticamente.

Background-image

Se você quiser por uma imagem de fundo a sintaxe é :

background-image: url (”caminho da imagem”);

Como no exemplo abaixo:

body {
background-image: url(”/images/tecs2.png”)
}

Background-repeat

Usa-se para repetir ou não a imagem na tela de fundo. A sintaxe é :

background-repeat: propriedade;

onde propriedade é igual a :

repeat repete a imagem por toda tela de fundo
repeat-y repete a imagem verticalmente
repeat-x repete a imagem horizontalmente
no-repeat não repete a imagem

Exemplo:

body {
background-image: url(”/images/tecs2.png”);
background-repeat: repeat-x;
}

Background-attachment

A propriedade background-attachment faz com que a imagem fique fixa na tela ou acompanhe a página conforme a barra de rolagem do navegador é utilizada.A sintaxe é:

background-attachment: propriedade;

onde a propriedade é igual:

fixed fixa a imagem na página
a imagem acompanha a barra de rolagem

Exemplo:

body{
background-image:url”/images/tecs2.png”);background-repeat: no-repeat;

background-attachment: fixed;

}

Background-position

A propriedade position da função background faz com que posicionemos esta imagem de fundo na página.Sua sintaxe é : background-position: propriedade onde propriedade é igual :

x-pos y-pos coordenadas da posição
x-% y-% coordenada da posição na tela em porcentagem
top left imagem fica no topo a esquerda
top right a imagem fica no topo a direita
top center a imagem fica no topo no centro da página
center left a imagem fica no meio da página a esquerda
center center a imagem fica no meio da página no centro
center right a imagem fica no meio da página a direita
bottom left a imagem fica na esquerda no botton
botton center a imagem fica no centro no botton
botton right a imagen fica na direita no botton

Exemplo;

body {

background-image: url(”/images/tecs2.png”);

background-repeat: no-repeat;

background-position: 200px 70px;

}


Utilizar todas a propriedades em uma única declaração.

Para se utilizar todas as propriedades deve se seguir a seguinte sitaxe:

background: color image repeat attachment position;

em qualquer ordem podendo omitir uma ou mais propriedades. Veja o exemplo:

body {background: #00FF00 url(”tecs2.png”)

no-repeat fixed 200px 70px;

}

Com o tempo vamos explorar mais a propriedade background. Pratique estas propriedades para se ambientar bem com elas pois são muito úteis.

Espero que tenham gostado !

Obrigado !

Refêrencias:

http://www.w3schools.com/css/

http://www.maujor.com/tutorial/backtut.php

http://www.pt-br.html.net/tutorials/css/lesson3.asp

No Comments
Tags , , ,

“Hello Mundo” parte 3

May 30, 2008
Java, SEO, curso, programação
Escrevemos o primeiro programa em java, compilamos e executamos ele na ultima aula (aula 4).
Vamos dar uma olhada mais de perto no código do programa “Hello Mundo”.
O código do programa deverá ser:

/*
* Main.java
*
* Created on 25 de Outubro de 2007, 11:56
*
* To change this template, choose Tools | Template Manager
* and open the template in the editor.
*/

package hellomundoapp; /**
*
* @author Rogerio
*/
public class Main {

/** Creates a new instance of Main */
public Main() {
}

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
System.out.println(”Hello Mundo!”); // visualiza a frase.
}

}

Para começar, numerei as linhas para facilitar a explicação.

O programa “hello Mundo” possui três componentes: os comentários do código, a definição da classe hellomundoapp e o método main.

Os comentários do código

Os comentários são textos escritos pelos programadores para melhorar a o entendimento do código do programa. Normalmente explica o que o código vai fazer naquela parte do programa. Serve para que outros programadores se orientem e entendam o que está acontecendo naquela parte do programa. Os comentários não fazem com que o computador realize uma ação quando o programa é executado O compilador Java ignora os comentários.

Há 3 maneiras de inserir um comentário em um programa Java:

1 - /* comentário */ - escreve-se o comentário entre os */. Pode-se fazer em múltiplas linhas. Abre-se o comentário com /* , escreve-se com múltiplas linhas ou não, depois fecha-se o comentário com */ . No programa “Hello Mundo “, há comentários de múltiplas linhas iniciando na linha 1 e fechando na linha 8. este comentário estão escritos o dia de criação do programa. O NetBeans cria automaticamente este tipo de comentário toda vez que criamos uma class

2 - /** documentação*/ -comentário utilizado para escrever documentação. As linhas 10 a 13 (autor do programa), 16(criação de uma nova instancia de classe), 19 a 21 (parâmetros) são comentários de documantação também criados automaticamente pelo NetBeans.

3 - // comentário - comentário de única linha. O compilador java ignora tudo após //. O comentário pode ir até o fim da linha. Na linha 23 inserimos um comentário de uma única linha explicando o comando escrito no código.

Use comentários para esclarecer conceitos difíceis do programa.
Esquecer um dos delimitadores do comentário causa um erro de sintaxe.
Não se preocupem com algumas palavras escritas acima como nos comentários de documentação. Vamos vê-las no tempo certo

Definição da Classe main

Uma classe é definida pelo seguinte comando:

class nomedaclasse {
. . .
}

A palavra class inicia a definição da classe seguida pelo seu nome e o código de cada classe aparece entre os colchetes. O conceito de classes veremos nas próximas aulas. Em nosso programa a classe é iniciada na linha 14 e finalizada na linha 25.

14 public class Main {

15 /** Creates a new instance of Main */
16 public Main() {
17 }

18 /**
19 * @param args the command line arguments
20 */
21 public static void main(String[] args) {
22 System.out.println(”Hello Mundo!”); // visualiza a frase.
23 }

24 }

O Método main

Nas aplicações em Java, toda aplicação deve ter o método main cuja o código é:

public static void main(String[] args)

Este comando é o ponto de entrada de sua aplicação e chamará todos os outros métodos requeridos pelo seu programa. O método main começa na linha 21 e se encerra na linha 23.

A linha 22:

System.out.println(”Hello World!”);

Utiliza a classe System das bibliotecas java para escrever a mensagem no dispositivo de saída padrão, no caso a janela Saída do netBeans.

21 public static void main(String[] args) {
22 System.out.println(”Hello Mundo!”); // visualiza a frase.
23 }

Se você não entendeu…

O programa java é dividido e 3 parte; os comentários, a definição de classe e o método main

Os comentários pode ser escritos de 3 formas (/* texto*/, /** documentação*/ e //texto ) e não são lidos pelo computador. Servem para explicarmos partes do código melhorando a legibilidade do programa.

Classe será explicado melhor no futuro.

O método main é o método que executará o código e todos os outros métodos de seu programa. Todo programa Java tem que ter o método main.

Muita coisa pra um dia? Tudo bem!!! Conforme formos nos aprofundando, estes conceitos vão ficando mais simples. Lembrem-se que ainda estamos no primeiro programa.

Espero que tenham gostado!!!

Referência: http://java.sun.com/docs/books/tutorial/getStarted/cupojava/netbeans.html

Java- Como Programar - Deitel Quarta Edição

Dúvidas: teks@palmierinet.com

No Comments
Tags , , ,
« Older Posts
Newer Posts »


  • Veja Também!

    palmierinet.com

    ↑ Grab this Headline Animator

  • Ads by Palmierinet

  • Recent Comments

    • Ad by google

    Este blog é monetizado pelo HOTWords utilizando o plugin WP-HOTWords 4.2.