Jan-08 02

Tornar o texto de um radio/checkbox clicavel

Enviado por: Thales RB. .     3 comentários.     Categorias: HTML-CSS

A tag <label> serve para criar um relacionamento entre o texto (rótulo descritivo) e o campo. Essa tag é muito usada para tornar o site acessivel a leitores de tela(para deficientes visuais).

Mas ela também faz com que ao ser clicado no texto o campo receba o foco(o cursor), com isso podemos tornar o texto de um checkbox clicavel.

Para usa-lo, é só adicionar um for=”nomedocampo” no label, e o nomedocampo deve ser definido no id do input, lembrando que o id deve ser unico em todo o formulario.

Aqui um codigo de exemplo:

[code="html"]





[/code]

Exemplo, clique nos textos:


Legal né ?, e pode ser usado em qualquer formulário, e com certeza os usuarios iram agradecer já que fica bem mais facil de se clicar, só é preciso que os usuarios saibam dessa funcionalidade

Oct-07 30

Listagem de comandos do HTML

Enviado por: Thales RB. .     25 comentários.     Categorias: HTML-CSS

Aqui tem um lista com quase todos os comandos HTMLs existentes elas estao divididas por funcionalidade para facilitar

(more…)

Oct-07 26

Tabela de acentos e caracteres especiais do HTML

Enviado por: Thales RB. .     26 comentários.     Categorias: HTML-CSS

Dependendo do navegador, os caracteres especiais como acentos e simbolos, podem não ser reconhecidos, para isso, existe uma representação especial desses caracteres.

Só lembrando, que para qualquer pagina criada é preciso defenir o charset, para que ela reconheça os acentos, por padrão o comando para isso é

[sourcecode language='html']

[/sourcecode]

Aqui tem uma lista com todos os caracteres e seus respectivos codigos:

(more…)

Oct-07 26

Marquee e seus atributos

Enviado por: Thales RB. .     10 comentários.     Categorias: HTML-CSS

Acho que qualquer um que conheça html, deve conhecer o comando marquee<marquee></marquee>, ele serve para dar um efeito de movimento ao texto, só que ele tem uma serie de atibutos, para deixar melhor esse efeito, aqui vai um lista com alguns dos atributos dele:

behavior: tipo de movimento ex: scroll, slide

loop: quantidade de vezes que o conteudo irá “rodar”

direction: direção que o conteudo se moverá, ex: left, right, top, bottom
height e width: dimensões da area de movimento
scrollamount: velocidade do movimento
scrolldelay: tempo que o conteudo ficara oculto

e uma função muito interressante, que pode ser usada, nesse comando, é o onmouseover, onmouseout que permite ao passar do mouse parar o movimento.

E aqui um exemplo, com todos os atributos, sendo usados:
[sourcecode language='html']
height="150" width="150" scrollamount="2" scrolldelay="10"
onmouseover="this.stop()" onmouseout="this.start()" align="left">
aqui pode ter um texto, mas ficaria melhor com imagens

[/sourcecode]
e o resultado será esse:


aqui pode ter um texto, mas ficaria melhor com imagens, e ao parar o mouse sobre ele ele pausa o movimento

Para textos em linha, eu acho feio esse efeito, mas com imagens, ele fica perfeito, principalmente para algo como, uma galeria de parceiros, o que permite, ter uma area pequena, mas com muitas imagens.