Ir para conteúdo



ray

Cadastrado: 16 Jan 2006
Offline Última atividade: Apr 28 2012 07:05 PM
-----

Tópicos que criei

[Dicas] Protegendo pastas no ftp

09 August 2011 - 03:02 PM

Ola pessoal resolvi postar essa dica simples porem muito util. Tenho visitado alguns sites e vejo que é muito simples entrar em pastas como imagens e ver todas as imagens do ftp vamos ver o exemplo abaixo:
Imagem Postada
Diversos sites contem esse erro de não proteger todas suas pastas. Bom para que nenhum engraçadinho tente roubar suas fotos ou arquivos vamos criar uma index.html com o seguinte código



<html>
<head><title>Nome do seu site - Sem acesso</title></head>
<body>
<h1>Erro 403: Acesso negado/Proibido.</h1>
<hr>
Voc&#234; chegou a esta p&#225;gina por engano, por favor, use o bot&#227;o Voltar para retornar ao site.
<hr>
<a href="javascript:window.history.go(-1)">&#171; Voltar</a>
</body>
</html>

Crie esse codigo e salve como index.html, não se esqueça index.html

Ok depois de criado essa página você tera que colocar esse index.html em todas as pastas do seu site/ftp.
Se você tiver 20 pastas, (exemplo: imagens, scripts, conteudo, testes, sobre, detalhes) coloque o arquivo em todas elas!
isso evita que algum engraçadinho tente roubar seus arquivos ou imagens!

essa é uma dica simple mais muito util lembrando que você também pode personalizar sua página do erro do jeito que você achar melhor, mas sempre deixando o nome do arquivo como index.html

é isso ae pessoal espero que tenham gostado
abraços!

Atenciosamente,
Raynner

Regras dessa sessão!

07 August 2011 - 11:46 AM

Regras da Sessão HTML
Leia atentamente antes de postar!




Olá pessoal estamos aqui sempre para melhorar o nosso fórum, e para que haja mais organização na parte de HTML algumas regras terão que ser cumpridas a partir de hoje 07/08/2011

Regras gerais de postagem
  • Dê um título referente a sua duvida seja claro e breve. Está proibido criar tópicos com títulos como: Ajuda, Help Aqui, Help, socorro, o que tem de errado?, não consigo, etc.


  • Não crie tópicos com títulos com todas as letras em maiúsculo, basta apenas a primeira letra do título em maiúsculo.


  • Não de Up nos tópicos, seja paciente Todos colaboram espontâneamente e o fazem geralmente em seu horário de folga; ninguém aqui ganha para dar suporte 24 horas por dia.


  • Não envie MP a qualquer membro solicitando ou oferecendo suporte e nem peça ou ofereça atendimento por MSN ou qualquer outro meio que não seja o fórum. O fórum existe justamente para que outras pessoas possam ter acesso às soluções.

Caso alguma dessas regras sejam descumpridas o membro será alertado no seu próprio tópico, caso haja reincidência da quebra das regras o membro poderá ter seu nível de Warm aumentado, poderá ser suspenso ou banido do fórum, sem aviso prévio!

Observação
  • Todo topico que estiver resolvido, será renomeado e adicionado a tag (Resolvido) na frente do titulo.


  • Tópicos como Dicas ou tutoriais, serão movidos para a Sub-sessão HTML > Dicas (Clique aqui para vizualizar a sessão dicas), Além disso será adicionado a tag [Dicas] na frente do título da postagem


  • Antes de postar quaisquer conteudo utilize a busca do forum para evitar multiplos tópicos com o mesmo assunto!


Seja consciente
Por este motivo pedimos que você se utilize do fórum como um privilégio e não um direito.
Use o fórum com bom senso tendo a certeza de que ele não é só seu, mas de todos os que o freqüentam.


Atenciosamente,

Equipe de Administração/Moderação - Fórum CódigoFonte.net
http://forum.codigofonte.net

Regras do Codigo Fonte

06 August 2011 - 11:53 PM

.
.
.
.
.
..
.
.
..
.
.
.
.
.

Regras do Codigofonte.net
Leia Atentamente todas as regras!



O Fórum é um espaço aberto utilizado pela comunidade de usuários do codifofonte.net, afim de discutir os assuntos relativos Webdesigner, desiger, programação, linguages.
Por este motivo pedimos que você se utilize do fórum como um privilégio e não um direito.
Use o fórum com bom senso tendo a certeza de que ele não é só seu, mas de todos os que o freqüentam.

Solicitamos que você usuário não divulgue qualquer tipo de conteúdo obsceno, vulgar, agressivo, preconceituoso, ameaçador e nem tampouco qualquer tipo de conteúdo referente à PIRATARIA de software.
Qualquer outro evento que esteja em desacordo ou violando as leis vigentes no Brasil, bem como, fora das normas de conduta e bom senso também poderá sofrer moderação.
O conteúdo publicado no fórum não é tratado como responsabilidade da equipe de Administração e Moderação do codigofonte.net, e assim sendo os que publicarem tais conteúdos tornam-se responsáveis pelos mesmos.

O fórum é moderado e portanto, a equipe de Administração e Moderação tem total poder para nele interferir. Eles podem renomear/fechar/deletar tópicos e banir/suspender usuários se assim julgarem conveniente. Portanto tenha conhecimento de que os responsáveis pelo fórum poderão, de acordo com seu próprio julgamento, bani-lo, por qualquer infração ou ato considerado incorreto que você venha a cometer.

  • Não envie MP a qualquer membro solicitando ou oferecendo suporte e nem peça ou ofereça atendimento por MSN ou qualquer outro meio que não seja o fórum. O fórum existe justamente para que outras pessoas possam ter acesso às soluções.

  • É expressamente proibido qualquer tipo de negociação no fórum sem prévia autorização da Administração.

  • É proibido qualquer tipo de link ou citação que tenha o finalidade de dar vantagens financeiras ou não ao membro.

  • Não use os comentários do perfil ou a atualização de status para pedir suporte ou atenção a um tópico/post.

  • Não dê UP a tópicos em menos de 24 horas. Todos colaboram espontaneamente e o fazem geralmente em seu horário de folga; ninguém aqui ganha para dar suporte 24 horas por dia. Na reincidência, será SUSPENSO e banido, se ainda insistir.

  • Não ofenda nenhum membro do fórum e no caso de se sentir ofendido não retruque, entre em contato com alguém da equipe para resolver a questão.

  • Não crie titulos do topicos com letras maiusculas (EX: ME AJUDA AQUI).

  • Descreva o topico quando for criar o titulo, não crie topicos como (Help, socorro, me ajuda, nao sei o que acontece, etc)
Caso alguma dessas regras forem descumpridas o membro poderá ser banido/suspenso/Warn sem aviso prévio


No codigofonte.net damos valor ao trabalho dos outros e exigimos o mínimo de ética por parte de seus membros.

Atenciosamente,

Equipe de Administração - Fórum CódigoFonte.net
http://forum.codigofonte.net



Homenagem à Ramón Valdés

06 August 2011 - 09:06 AM

Olá pessoal criei esse desafio para para que possamos homenagear o Grandioso Seu Madruga (Don Ramón Valdés), que em agosto completa 23 anos de saudade, e para relembra-lo vamos criar uma foto melhor que a outra!

O desafio tem inicio hoje 06/08/2011 e tem seu término dia 06/09/2011 ou seja 1 mês para o desafio!
O tema do desafio é uma homenagem à Ramon pode ser usada imagens dele e do elenco de chaves!
Voces terão direito a postar somente 1 imagem
Os Arquivos poderão ser jpg, jpeg, jpe, jfif, bmp, gif, png
Você podera hospedar a imagem no Imageshack, etc
Dimensões 800*600

-------------------------------------------------------------------------------




Resumo!

Inicio e termino: 06/08/2011 à 06/09/2011
Tema: Livre, Chaves
Limite de imagem: 1 imagem por participantes
Dimensão da imagem: 800*600
Extensão da imagem deve ser: jpg, jpeg, jpe, jfif, bmp, gif, png



É isso ae pessoal espero que todos participem vamos colocar o forum novamente a todo vapor!
Logo mais posto minha imagem!(Y)

abraço a todos!

Att. Raynner

[Dicas] Linguagem HTML [TAGS]

17 July 2011 - 08:28 AM

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

Tutorial HTML para iniciantes

HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores.
A tecnologia é fruto do "casamento" dos padrões HyTime e SGML.
HyTime é um padrão para a representação estruturada de hipermídia e conteúdo baseado em tempo.
Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiper-ligações.
O padrão é independente de outros padrões de processamento de texto em geral.
SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

Hoje em dia é tudo mais fácil com programas do estilo do DreamWeaver + Fireworks, neles é muito pratico, rápido, e facil, porem para ninguem ficar perdidos em algumas "tags" resolvi fazer esse tutorial, para ninguem se perder quando começar fazer algo em HTML.

Toda página em HTML tem que começar e terminar obrigatoriamente assim:

<HTML>.........
..................................... = ..........A tag marca o início da página.
<head>.................................................. =.......... A tag marca o início do cabeçalho e dentro desse cabeçalho que fica a maioria dos Scripts.
<title>.Titulo da página </title>............. = ..........A tag serve para dar um título a sua pagina.
</head>................................................ = ..........a tag fecha o cabeçalho
<body>.................................................. = ...... ...a tag marca o inicio do corpo , sua página será montada dentro das tags
</body>............................................... . = ..........a tag fecha o fim do conteúdo da página.
</HTML>................................................ = ........ a tag marca o fim da pagina

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como fazer minha pagina ter um titulo?

Basta adicionar o Nome ou titulo da página dentro das tags <title></title>

<title>Minha primeira página na internet</title>

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como posso arrumar as margens da minha página? Modo sem CSS (folha de estilo)

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth ="0">

Explicando as tags:

leftmargin="0"...........=........Margem da esquerda
rightmargin="0" ........=........ Margem da direita
topmargin="0"...........=........ Margem do Topo
bottommargin="0".....=........ Margem Inferior
marginheight="0"........=....... Altura da margem
marginwidth="0"........=........ Largura da margem
0 ................................=........ igual ao valor de espaço da margem podendo ser alterado para qualquer valor numérico

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como escolher cores de links, fonte e fundo da pagina?

<body link="#990000" alink="#000000" vlink="#00FF00" bgcolor="#333333" text="#000000" background="fundo.jpg">

Explicando as tags:

link="#990000".............. ...............=.............. Cor do link
alink="#000000".............. .............=.............. Cor do link quando clicado
vlink="#00FF00".............. .............=.............. Cor do link Visitado
bgcolor="#333333".............. .........=...............Cor do fundo da página
text="#000000".............. ..............=.............. Cor do texto na página
background="fundo.jpg".............. =..............Imagem de fundo da página

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como arrumo fonte, cor do texto, e tamanho em determinados pontos?

Para modificar a fonte de um determinado trecho basta inserir o seguinte código:
<font face="Arial">Meu texto com fonte arial</fonte>

Meu texto com fonte arial


Para modificar a cor de um determinado trecho do texto basta inserir o seguinte código:
<font color="#00FF00">Meu texto de cor verde</font>

Meu texto de cor verde

Para modificar o tamanho da fonte basta inserir o seguinte código:
<font size="+6">Meu texto grande</fonte>

Explicando as tags:
face....... =...... Seleciona a fonte do texto (Arial, helvetica, sans-serif)
color...... = .... Cor
size....... =.......Tamanho, pode-se colocar: +1, +2, +3, +4, +5, +6, -1, -2, -3, -4, -5, -6, ou somente numeros 10, 20, 30, 40


Cara adicionar um cabeçalho (tamanho também) Basta colocar as seguintes tags
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2 </h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>

Cabeçalho 1

Cabeçalho 2

Cabeçalho 3

Cabeçalho 4

Cabeçalho 5

Cabeçalho 6

Também existem tags como
<big><big> = deixando um pouco maior
<small></small> = deixando um pouco menor


═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como colocar negrito, itálico, sublinhado ou tachado?

Basta usar as seguintes tags

<b>Texto negrito</b>

<i>Texto Itálico</i>

<u>Texto Sublinhado</u>

<s>Texto Tachado</s>

Texto negrito
Texto Itálico
Texto Sublinhado
Texto Tachado

Explicando tags:
b.. .=....bold (negrito em ingles = bold)
i.. .=.... italic (itálico em inglês = italic)
u.. =.... underline (sublinhando em inglês = underline)
s.. =.... strikethrough (tachado em inglês = strikethrough)

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como alinhar textos?

Formas para alinhamento são:
Dentro da tag <p></p> Incluindo o aling="right" ficando assim:

<p aling="right">Direita</p>
<p aling="center">Centro</p>
<p aling="left">Esquerda</p>
<p aling="justify">Justificar</p>
<center></center>

Direita

Centro

Esquerda
Justificar

Centro




explicando tags:

right:............ Alinha à direita
center:......... Alinha ao centro
left: .............Alinha à esquerda
justify:......... Isso fará com que o navegador ao espaço as palavras de maneira diferente, de modo que eles se alinham com a margem direita
<center>: ......Alinha ao centro, pouco utilizado ultimamente


═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como eu faço para pular linhas?

Simplesmente coloque a tag

<br />


═════════════════════════════════════════════════════════════════════════════════════════════════════════


Hyperlinks, Como criar um link para outras paginas?

Vamos utilizar o elemento <a href=""></a> veja como abaixo:

<a href="http://www.google.com.br">Clique aqui</a>


Como fazer para abrir em outra Aba/Janela?

utilizaremos o complemento target="_blank" veja como abaixo:
<a href="http://www.google.com.br" target="_blank">Clique aqui</a>

Explicando as tags:
href.......... =.... destino de origem do arquivo
target....... = ....alvo de onde abrirá a página. Caso a pagina tenha um iframe para abrir dentro do iframe você precisará colocar o nome do iframe no lugar de _blank.


═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como criar âncoras?

<a name="sobe"></a>
Esse código você pode colocar no começo da sua página, caso a página seja muito extensa você quer subir rápido sem usar a barra de rolagem ou scroll do mouse você cria o seguinte link

<a href="#sobe">Sobe</a>

caso você tenha que fazer um tutorial ou textos que precisa clicar para achar o ponto certo você cria âncoras que já ira localizar o conteúdo exemplificando

<a href="#1">Criança</a>
<a href="#2">Jovem</a>
<a href="#3">Adulto</a>

<a name="1"></a> A criança com sua alegria...... <a href="#sobe">Sobe</a>
<a name="2"></a> O jovem e seus problemas ...... <a href="#sobe">Sobe</a>
<a name="3"></a> O adulto com suas dores ...... <a href="#sobe">Sobe</a>


═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como eu crio um frame? Como coloco outra pagina dentro da minha?

Para criar um frame você precisará colocar o seguinte código na sua página
<iframe src="http://www.google.com.br" name="centro" width="500" height="500" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" vspace="0" hspace="0"></iframe>

EX: quando abrir sua página, abrirá a pagina do Google dentro da sua página

Explicando as tags:
src.................................... = ...............................Pagina de inicio do iframe, podendo ser um arquivo .html ou uma página externa (p.ex.Google)
name............................... = ...............................Nome do frame, quando linkar um menu para abrir dentro do iframe basta colocar o nome do iframe na target
width.............................. = ...............................Largura do iframe
height............................. = ...............................Altura do iframe
frameborder................... = ...............................bordas --> valores 1 ou 0
Scrilling.......................... =............................... Barra de rolagem --> valores: yes(Com barras), no(sem barras), auto(automarico)
marginwidth...................=............................... Largura da margem do iframe
marginheigth..................=............................... Altura da margem do iframe
vspace............................=............................... Espaço vertical
hspace............................=............................... Espaço horizontal

═════════════════════════════════════════════════════════════════════════════════════════════════════════


Como faço para abrir paginas dentro do meu iframe?

Muito simples utilizaremos o seguinte código:
<a href="contato.html" target="centro">Contato</a>

assim ele abrira a pagina dentro do seu iframe


═════════════════════════════════════════════════════════════════════════════════════════════════════════


Como eu coloco uma imagem na minha página HTML?

Para introduzir sua imagem na sua página o seguinte código e utilizado:

<img src="minhafoto.jpg"> (A foto aparecerá em tamanho real na sua página)
<img src="minhafoto.jpg" width="100" heigth="100"> (Foto com tamanho de 100 x 100 Quadrado)

Explicando tags usadas:

src.................................: Destino de onde esta sua imagem
width............................: Largura
heigth...........................: Altura
border...........................: Borda na imagem, pouco utilizado, (caso você link a imagem aparecera uma borda da cor dos links)
alt.................................: Texto alternativo (descrição), quando mouse fica sobre a foto aparece o texto alternativo
title...............................: Texto alternativo (descrição), quando mouse fica sobre a foto aparece o texto alternativo
aling..............................: alinhamento --> Valores: baseline, top, middle, bottom, texttop, absmiddle, absbottom, left, right (Padrão, Linha de base, Superior, Meio, Inferior, Alto do texto, No meio, O mais embaixo, Esquerda, Direita)
vspace...........................: espaçamento vertical
hspace...........................: espaçamento horizontal

Alguns dos formatos mais utilizados são: .gif . jpg .jpeg .png .bmp .tif .pcx . tga

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como eu crio uma tabela?


O seguinte código tem que ser adicionado.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> Minha tabela </td>
</tr>
</table>


Explicando as tags:

table...............................: Inicio da table
width...............................: tamanho da tabela podendo ser utilizando em pixels ou porcentabem
border.............................: borda da tabela
cellspacing.....................: Espaço entre as células
cellpaging.......................: Preenchimento da células
tr........................................: Linhas da tabela
td........................................: Colunas da tabela

Tags que podemos aplicar na tabela:

height......................................: Altura da tabela
aling........................................: alinhamento da tabela linhas ou colunas > valores: Center, Justify , Left, Right (central, Justificado, Esquerda, Direita)
valing.......................................: Alinhamento vertical > Valores: Top, Middle, Bottom, Baseline (Superior, Meio, Inferior, Linha Base)
background.............................: Imagem de fundo, tabela, coluna ou linhas
bgcolor.....................................: Cor do fundo, tabela, coluna ou linhas
bordercolor..............................: Cor da borda da tabela (necessário border="1" ou mais)
bordercolorlight.......................: Cor da linha da borda inferior e direita
bordercolordark........................: Cor da linha da borda superior e esquerda


═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como organizar, menu ou textos (estilo parágrafo)


<dl>
<dt>Filosofia</dt>
<dd>A Filosofia é o estudo....</dd>
<dt>Arco-íres</dt>
<dd>O arco-íres contem 7 cores porém na teoria.....<dd>


Filosofia
A filosofia é o estudo...
Arco-íres
O arco-íres contem 7 Cores porém na teoria.....


═════════════════════════════════════════════════════════════════════════════════════════════════════════



Menu com marcadores:

Lista não ordenadas

<ul>
<li>Tutorial</li>
<li>HTML</li>
<li>para</li>
<li>Iniciantes</li>
</ul><br style="">

· Tutorial
· HTML
· para
· iniciantes


Lista Ordenada

<ol>
<li>Tutorial</li>
<li>HTML</li>
<li>para</li>
<li>iniciantes</li>
</ol>
1. Tutorial
2. HTML

3. para
4. Iniciantes

ol : Define uma lista ordenada
ul : Define uma lista não ordenada
li : Define um item de lista
dl: Define uma lista de definições
dt : Define um termo de definição
dd : Define uma descrição de definição


═════════════════════════════════════════════════════════════════════════════════════════════════════════


como remover o marcador da lista não ordenada?

você terá que criar um estilo na tag <ul> Ficando assim
<ul style="list-style-type:none;"> Assim não aparecerá o marcador útil para fazer menus!


════════════════════════════════════════════════════════════════════════════════════════════════════════



Como eu posso criar linhas verticais ou horizontais?


Teremos que utilizar a tag <hr>

você pode estilizar ela adicionando as seguintes tags:

width..........................................: largura da linha, pixels ou porcentagem
size.............................................: tamanho em altura (esse seria o height) (para deixa-la na vertical aumente o valor do size e diminua width)
noshade="noshade"....................: desativa o atributo tritimensional da barra, deixando-a apenas com duas dimensoes e com cor cinza-escura
aling............................................: Alinhamento -- > Valores: left, center, right (Esquerda, Central, Direita)


═════════════════════════════════════════════════════════════════════════════════════════════════════════


Como eu deixo a linha <hr> pontilhada ou tracejada?

teremos que adicionar estilo na tag <hr> ficando assim
Pontilhada:
<hr style="border:1px dotted; border-left:none; border-top:none; border-right:none;" />

Tracejada:
<hr style="border:1px dashed; border-left:none; border-top:none; border-right:none;" />

você pode modificar o tamanho da border de 1px pra 2 3 4 5, conforme sua preferência.

═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como posso mover o texto na minha pagina de forma fácil?

Você terá que introduzia a tag <Marquee>:

<marquee> Meu texto se movendo </marquee>
Podemos estilizar a posição que ira se movimentar velocidade etc acompanhe as tags que podem ser adicionadas dentro do marquee

behavior................................: Moviemento do marquee > Valores: scroll, slide, alternate( Scroll: faz rolar em um mesmo sentido, slide: Vai de um ponto a outro ate chegar no final da tela, alternate: Vai e volta não sai da tela)
direction................................: Direção que fará > Valores: down , left, right, top (desce, esquerda, direita, sobe)
loop........................................: Quantas vezes a mensagem ira passar
scrolldelayon........................: Serve para selecionar a velocidade, Quanto maior for o numero mais lento fica
MouseOver="stop()".............: serve para para o texto quando fica como mouse sobre
onMouseOut="start()"...........: serve para fazer o texto andar quando tirar o mouse


═════════════════════════════════════════════════════════════════════════════════════════════════════════

Como colocar comentários no HTML?

<!-- Escrever aqui -->

Util para você marcar onde começa cada coisa de sua pagina, assim fica mais fácil localiza-lo no Ctrl+F caso esteja perdido

═════════════════════════════════════════════════════════════════════════════════════════
═══════════════════════════════════════════════════════════════════════════════════════════════
═══════════════════════════════════════════════════════════════════════════════════════════════════
═══════════════════════════════════════════════════════════════════════════════════════════════════════
═══════════════════════════════════════════════════════════════════════════════════════════════════════════
═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
Até o próximo tutorial
HTML para iniciantes – Intermediario
Tutorial desenvolvido por raynnerb
Site: http://www.webdesign...ite.com/raynner

Abraço a todos espero que vocês possam tirar duvidas e entenderem mais HTML!
Atenciosamente: Raynner (Y)

═══════════════════════════════════════════════════════════════════════════════════════════════════════════════
═══════════════════════════════════════════════════════════════════════════════════════════════════════════
═══════════════════════════════════════════════════════════════════════════════════════════════════════
═══════════════════════════════════════════════════════════════════════════════════════════════════
══════════════════════════════════════════════════════════════════════════════════════════════
══════════════════════════════════════════════════════════════════════════════════════════