Permitir, Negar, Desabilitar e Habilitar Listagem com htaccess

Listagem com htaccess!

When a web browser is pointed to a directory on your web site which does not have an index.html file (or any other index file) in it, the files in that directory can be listed on a web page.

Quando um navegador aponta para um diretório em seu site no qual não existe um arquivo index nele, os arquivos deste diretório irão ser listados na página!

Let us see few snippets that can be added in htaccess file to allow or avoid directory listing in apache server.

Vamos ver alguns truques que podem ser adicionados ao htaccess para permitir ou evitar a listagem do diretório no servidor apache.

Enable / Disable directory Listing (Habilitar / Desabilitar Listagem de Diretório)

To allow a web server to produce a directory listing, whenever you point a directory without index file. Add following line in your .htaccess file.

Para permitir que servidor web crie uma listagem do diretório, sempre que apontar para um diretório sem arquivo index. Adicione as seguintes linhas no seu arquivo .htaccess

Options +Indexes
# or #
IndexIgnore *

null

To disable or prevent the directory access add following line in your .htaccess file. If user points the browsers to a directory which does not have index file then in this case 403 error will be

Para desabilitar ou prevenir o acesso ao diretório adicione as seguintes linhas no seu .htaccess. Se o usuário abrir no navegador este diretório que não tem um arquivo de index, então ele irá receber uma mensagem de erro 403.

Options -Indexes

Following is the error page that gets displayed when we try to access any directory without index file.

Segue a página de erro que será exibida quando nós tentarmos acessar algum diretório sem arquivo index.

null

Change Listing style (Altere o estilo de Listagem)

You may want to display other details while showing the directory listing. This includes file icons, file size, modification date and more. This can be done by adding fancy style to your htaccess file. Add following snippet in .htaccess file.

Você pode querer exibir outros detalhes enquanto mostra a listagem do diretório. Isto inclui arquivo de ícones, tamanho do arquivo, data de modificação e mais. Isto pode ser feito pela a adição do estilo fancy ao seu htaccess. Adicione o seguinte código ao seu htaccess.

IndexOptions +FancyIndexing

null

To remove the fancy directory listing or to display normal directory listing, use -FancyIndex.

Para remover a listagem de diretório “fancy”, ou para voltar a exibir a listagem de diretório normal, use o comando abaixo.

IndexOptions -FancyIndexing

Ignore files with specific extension (Ignore arquivos de extensão específica)

It may happen that you may need to ignore certain files to get displayed in directory listing. This can be achieved using IndexIgnore directive in .htaccess file.

Pode acontecer que você precise ignorar que certos tipos de arquivos sejam mostrados na listagem do diretório. Isto pode ser alcançado usando a diretiva “IndexIgnore”.

Following snippet will not display .zip and .txt file in directory listing.

O truque seguinte não irá exibir arquivos .zip nem .txt na listagem do diretório!

IndexIgnore *.zip *.txt

Modify Index File (Modificar Arquivo Index)

It is possible to change the default index file from index.html (index.php, index.jsp …) to any other file. Following line will change the index file to Home.html.

É possível alterar o arquivo index padrão de index.html (index.php,index.jsp) para outro arquivo qualquer. A próxima linha altera o arquivo index para Home.html.

DirectoryIndex Home.html

Fonte: http://viralpatel.net/

:: Posicionar um objeto ou página no centro da tela ::

Introdução

Nota: Se você está à procura de uma técnica CSS para centrarhorizontalmente uma página na tela consulte este tutorial.

Neste tutorial vou mostrar a técnica CSS para posicionar um objeto ou uma página com altura definida no meio da tela do monitor do usuário, ou seja centrar na horizontal e na vertical, independente da resolução. Ao final da leitura desse tutorial você estará capacitado a posicionar com uso das CSS um objeto em qualquer lugar na tela, do monitor do usuário.

Posicionando uma imagem

Vou iniciar mostrando como posicionar uma imagem na tela. Usarei a imagem abaixo que nomeei de logo.gif:

logo de 220 por 80 pixel

O código HTML que coloca a imagem na tela é mostrado a seguir.



Página mostrando a renderização do código acima

Como você observou, a imagem está posicionada no canto superior esquerdo da tela com as margens superior (aproximadamente 20px) e esquerda (aproximadamente 10px) padrão, variando conforme o navegador usado.

Vamos a seguir atribuir um id para a imagem e estilizar o posicionamento da id. Escolhi o nome imgpos para o idda imagem e o HTML agora é:

As regras CSS para posicionamento.

A propriedade CSS que possibilita posicionar um elemento qualquer (no nosso caso o elemento img que tem aid="imgpos") é a propriedade position complementada pelas propriedades left e top. O valor absolute para a propriedade position quando declarado para um elemento controla a posição do elemento tomando como origem do sistema de coordenadas o canto superior esquerdo do primeiro box ancestral de que tenha sido posicionado com os valores fixedrelative ou absolute (Ver o tutorial Posicionando relativamente o absoluto). Caso não exista um elemento ancestral posicionado, a origem do sistema de coordenadas será o canto superior esquerdo da tela.

A regra CSS mostrada a seguir posiciona de forma absoluta em relação ao canto superior esquerdo da tela o elemento com id="imgpos" .

Observe a figura explicativa.

Mostra um logo no meio e as distâncias conforme o código acima

Notar que regra CSS a definição da posição absolute e das coordenadas (left ) que define o quanto a imagem dista da margem esquerda e (top) que define o quanto a imagem dista do topo.

A referência, como já foi dito acima é o canto superior esquerdo da tela e o ponto que ocupa a posição definida é o canto superior esquerdo da figura ou elemento posicionado.

IMPORTANTE: Você poderá alterar as referências da tela e consequentemente da figura ou elemento posicionado, mudando as propriedades para right e bottom . E valem as combinações para os quatro cantos da tela.

Qualquer unidade de medida CSS pode ser usada para definir as coordenadas, inclusive medidas relativas como, por exemplo, porcentagens.

Assim é válido declarar:

Desafio:

Você seria capaz de interpretar a regra acima e imaginar qual a posição ocupada pelo logo na tela já que a regra diz: posicione 50% para a esquerda e 50% para baixo na tela.

Página mostrando a posição ocupada pelo logo

Era esta a posição que você imaginou? Ou imaginou a figura no centro da tela?

Lembre-se o ponto que está a 50% do topo e 50% para a esquerda é o canto superior esquerdo da figura.

A figura não está no centro da tela. Volte lá e confira!

Posicionando no centro da tela

Conseguimos posicionar o canto superior esquerdo da figura no meio da tela com os valores declarados em porcentagens. E agora, para que o CENTRO da figura ocupe o meio da tela basta arrastar a figura para a esquerda e para cima de um valor igual a:

para a esquerda: metade da largura da figura;

para cima: metade da altura da figura.

A figura é um retângulo de 220 x 80 e os valores para arrastar são:

para a esquerda: 220px/2 = 110px;

para cima: 80/2 = 40px.

A propriedade CSS que determina o afastamento em volta dos elementos é margin.

Como a figura deve ser arrastada para a esquerda basta declarar uma margin-left negativa! E o arrastar para cima consegue-se com uma margin-top negativa!

Página mostrando o logo no centro da tela.

E o código completo da página para seus estudos.

Aplicando a técnica para uma página web

Você poderá aplicar esta técnica para posicionar uma página inteira no centro da tela. Isto só faz sentido prático quando a página tem altura reduzida e menor do que a altura total da tela. Se você tem uma página de entrada no site do tipo “Clique aqui para entrar” e que normalmente tem um design de dimensões reduzidas, poderá colocá-la no meio da tela com esta técnica.

Nota: A página que você vai visualizar foi desenvolvida com tabelas à maneira ultrapassada de projetar web sites. Usei um código HTML “ruim” apenas como ilustração da técnica, no entanto, ela é válida para sites desenvolvidos segundo os Padrõies Web.

Página de código ruim, exemplificando a técnica de centralização

O código fonte da página, mostra o uso da técnica.

Conclusões

Posicionar um elemento no centro da tela é uma tarefa bem simples com uso das CSS. Como você já deve ter concluido, usando esta técnica pode-se posicionar um elemento HTML em qualquer lugar na tela do usuário, tanto usando medidas absolutas como valendo-se de medidas relativas.

fonte: http://maujor.com/tutorial/meio_tela.php

Tutorial Intermediário de CSS: Seletores Classe e ID

Código CSS com seletores classe e id

No Tutorial Iniciante de CSS nós analisamos apenas os Seletores HTML – aqueles que representam uma tag HTML.

Você também pode definir seus próprios seletores na forma de seletores classe e ID.

A vantagem dissso é que você pode ter o mesmo elemento, mas apresentá-lo de modos diferentes dependendo de sua classe ou ID.

No CSS, um seletor de classe é um nome precedido por um ponto (.) e um seletor ID é um nome prededido por um sustenido (#).

O CSS fica mais ou menos assim:

 

O HTML se liga ao CSS usando os atributos id e class. Pra esse CSS, o HTML pode ser alguma coisa assim:

 

Veja que o primeiro parágrafo aparece diferente do segundo, já que no segundo foi aplicada a classe “intro”.

A diferença entre ID e classe é que ID só pode ser usado pra identificar um elemento, enquanto uma classe pode ser usada pra quantos elementos você quiser.

Você também pode aplicar um seletor pra um elemento HTML específico, basta declarar o seletor HTML primeiro. Assim

p.classe { qualquer coisa }

vai ser aplicado apenas a elementos parágrafo (p) que tenham a classe “classe”.

Na hora de criar nomes para suas classes e ID, procurem usar nomes que façam sentido e que representem a função daquele seletor. Evite nomes de classe como “texto-verde”, que representa apresentação. A vantagem do CSS é poder mudar todo o estilo do seu site de forma muito simples. Se você usa nomes assim, você perde flexibilidade. Quando, por exemplo, você quiser mudar o texto pra azul, ao invés de verde, você vai ter que 1)mudar o nome da classe para “texto-azul”, e mudar cada referência no seu HTML, ou 2)fazer com que a classe “texto-verde” mostre um texto azul. Estranho, não? Por isso, a classe “texto-destacado” ou “texto-forte” seria mais adequada.

 

fonte: http://codando.wordpress.com/2008/03/16/tutorial-intermedirio-de-css-seletores-classe-e-id/