segunda-feira, 7 de setembro de 2009

Incríveis e raros códigos html

Incríveis e raros códigos htmlAqui estão raros, úteis e bonitos códigos html para texto,imagens e links. Alguns exemplos: código marquee,tag acronym,link mailto e botão submit com imagem ...são alguns deles. Veja abaixo:
(Para a melhor visualização dos códigos, deixe a página carregar por completo)
1) HTML- Códigos Marquee

O código marquee é um texto ou imagem em movimento. Se você quiser chamar atenção use o código marquee. Mas não abuse, pois pode tornar-se irritante e desconcentrar o leitor. Seria útil para mostrar atualização, para post populares e anúncios.

Exemplo 1- Texto pra-lá-pra-cá

Seu texto aqui

<marquee behavior=alternate width="190"
scrollamount="7" scrolldelay="96" height="20"
bgcolor="#E0FFFF"><font size="5">Seu texto aqui</font></marquee>

Exemplo 2: Scrolling text


S
E
Q
U
E
L
A
N
E
T

<marquee direction=up scrollAmount=0scrollDelay=0
style="filter:wave(add=13,phase=1,freq=3,strength=25)"
width=100 height=220><font
style="font-family:arial; comic sans ms;font-size:20px;color:.000000">
<b><br>S<br>E<br<br>Q<br>U<br>E<br>
L<br>A<br>N<br>E<br>T</font></marquee>

Exemplo 3: Scrolling Text

Marquee é uma espécie de Letreiro


<marquee direction="right"
bgcolor="#E0FFFF">Marquee é uma espécie de Letreiro </marquee>

WIDTH: define a largura

HEIGHT: define a altura

DIRECTION: a direção que o letreiro deve rolar

BEHAVIOR: a fonte (type) da rolagem

SCROLLDELAY: o tempo de resposta em cada delay

SCROLLAMOUNT: como fará o loop

LOOP: a medida do loop

BGCOLOR: cor do background

HSPACE: espaço horizontal em torno do marquee

VSPACE: espaço vertical em torno da marquee

Se não gosta de digitar códigos, faça em Gerador de código marquee.
Mais sobre código marquee.

2)Link para E-Mail
Para fazer um simples e útil link de email, para os visitantes entrarem em contato com você, deve usar este código hml.

Exemplo 1: E-Mail Link com imagem

Código hml Email Link

<a href="mailto:seuemail@gmail.com"><img alt="Código hml Email Link" height="102" src="http://hackspc.com/wp-content/uploads/2009/04/contact-us1.jpg" title="Contate-nos" width="100"/></a>

Exemplo 2: Link de email comum

Contato

<a href="mailto:seuemail@gmail.com">Contato</a>

Exemplo 3: Email Link com assunto

Enviar email!

<a href="mailto:seuemail@gmail.com?Subject=Sobre o Sequelanet">Enviar email!</a>

Obs: “mailto:seuemail@gmail.com” nesta parte do código coloque o seu endereço de email.

3)Botão "Submit" com imagem
Este simples código permite mudar o botão "submit" por uma imagem.
Sem o atributo "Value" e "img scr" ele pode ficar assim , com imagem ele fica com uma aparência melhor.



<button type="submit" name="submit" value="submit"><img src="http://hackspc.com/wp-content/uploads/2009/04/submitbutton.jpg" /></button>

4)Efeito de texto HTML para criar um logo
Veja como criar um texto logotipo com html.


Este é meu Logo Text


<p ><font size="5"><b>Este é meu <span style="background: #CCCCCC; padding: 5px 5px 5px 5px;">Logo Text</span></b></font></p>

5)Raras Tags Html
Aqui estão raras tags html, que pode ser útil em certas situações.Esses raros códigos ainda estão em uso.

Exemplo 1- Acronym
Quando você passa o mouse sobre o texto com a tag acronym, aparece abaixo do texto uma caixa com um texto explicativo. Mas nem sempre é usado para siglas. Serve também para explicar determinadas palavras.

Sequelanet

<acronym title="Um blog...">Sequelanet</acronym>

Exemplo 2: ins e del

Eu gosto Amo Sequelanet

Eu <del>gosto</del> <ins>Amo</ins> Sequelanet

Exemplo 3:blockquote


Exemplo da tag blockquote
<blockquote>Exemplo da tag blockquote</blockquote>

A tag é feita para dar margem. Você pode dar estilo com CSS. Veja mais sobre a tag blockquote.

6)Criar links sem underline
Este código html te permite criar um link sem underline. Como este:

Este é o link sem underline!

<a href="http://www.sequelanet.com.br/" style="text-decoration: none">Este é o link sem underline!</a>

7)Ir para uma parte específica da página
Para você criar um link que aponta para uma parte na mesma página, igual na wikipédia, é este o código. É muito usado para criar o botão "topo", quando o visitante atinge o fim da página é só clicar no botão que voltará ao inicio. Tem a mesma função da tecla Page Up do teclado.

Topo

<a name="TOPO">Topo</a>

Em seguida, criar um link que irá direcionar o visitante para a parte da página onde está o name="TOPO"

<a href="http://www.sequelanet.com.br/2009/09/incriveis-e-raros-codigos-html.html#TOPO">Ir para o topo da página</a>

obs: coloque a cerquilha ou jogo da velha em frente ao texto da palavra em name.
Em href= coloque o link +a cerquilha+ o name (href="http://link#topo).


Ficará assim :

Ir para o topo da página

8)Redirecionar visitante para outra página
Meta refresh é um método de instruir um navegador da Web para atualizar automaticamente a página da web atual ou o quadro após um determinado intervalo de tempo, utilizando um elemento meta HTML com o http-equiv parâmetro definido para dar um "refresh" e um parâmetro de conteúdo que dão o intervalo de tempo em segundos. Também é possível instruir o navegador para buscar uma URL diferente quando a página é atualizada, incluindo a URL alternativa no parâmetro de conteúdo. Ao definir o tempo de atualização intervalo de zero (ou um valor muito baixo), isso permite atualizar meta a ser utilizada como um método de redirecionamento de URL.

Exemplo 1

<html>
<head>
<META HTTP-EQUIV="Refresh" CONTENT="0;
URL=http://www.novodominio.com.br">
<title>Redirecionar para novo site</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<H2>Site foi movido! O novo endereço é</H2>
<H2><a href="http://www.novodominio.com.br/">
http://www.novodominio.com.br/</H2>
</a>
<H2>"...Espere um momento será redirecionado..."</H2>
</center>
</body>
</html>

Exemplo 2
Devem ser colocadas dentro do <head>

Atualiza a página

<meta http-equiv="refresh" content="5" />

Direciona para um site depois de 5 segundos:
<meta http-equiv="refresh" 
content="5;url=http://exemplo.com/"/> 
 
Direciona para um site imediatamente:
<meta http-equiv="refresh" 
content="0;url=http://exemplo.com/"/> 
Fontes: Pc Hacks-Cool Html Codes - Informática na web-Marquee - Wikipédia-Meta Refresh

70 comentários:

  1. maneira as dicas ajuda mt quem nao sabe mexer no html

    parabens

    http://diogostanley.blogspot.com/

    ResponderExcluir
  2. BOAS DICAS!
    DÁ PRA USAR!

    E OW, FIZ UMA COMUNIDADE DE DIVULGAÇAO...TA NO MEU PERFIL!

    ResponderExcluir
  3. cara prbns das dicas valeu.
    bellissimo blog.

    ResponderExcluir
  4. valeeeu pelas dicas, tava precisando de códigos assim pra minha loja-blog virtual!

    ResponderExcluir
  5. VC PODE USAR OS CODIGOS NA PARTE DE DICAS :D

    ResponderExcluir
  6. Simplesmente adoreiiiii...não preciso dizer mais nada, apenas te desejo muita PAZ!!

    com carinho

    Regina

    ResponderExcluir
  7. Legal essas dicas, até hoje eu uso o "marquee" nos sites que desenvolvo hehe, da um efeito legal, mais é poco usada nos sites de hoje, hj em dia o flash é muito usado pra fazer esse efeito da marquee, só que flash deixa o site "pesado", parabéns pelo post.

    ResponderExcluir
  8. Tipo, os marquees eram MUITO usados antigamente, FATO. Só que com flash fica mais bonito também, pelo fato de ter anti-aliasling e tal,poder colocar mais efeitos além de ir pra lá e pra cá.
    Ah, uso firefox, e os marquees estão sem efeito, penso que a compatibilidade dos códigos podem ter influência também!

    ResponderExcluir
  9. Olha favoritei! Informação muito útil!

    []'s Heréticos

    ResponderExcluir
  10. muito esxplicativo
    continue sempre assim
    bj

    ResponderExcluir
  11. Boa tarde amigo; Vim lhe desejar um ótimo final de semana.
    "Lembre-se que se algum dia você precisar de ajuda, você encontrará uma mão no final do seu braço.
    À medida que você envelhecer, você descobrirá que tem duas mãos -- uma para ajudar a si mesmo, e outra pra ajudar aos outros"
    Abraços fort

    ResponderExcluir
  12. Valeu as dicas.
    Até hoje uso o bom e velho HTML.

    ResponderExcluir
  13. Querido amigo avassalador...
    Nossa, isso ajuda muitomesmo! valeu.

    ResponderExcluir
  14. tava procurando a um tempao esse codigo ^^.

    1) HTML- Códigos Marquee Exemplo 3: Scrolling Text

    Mas não achava

    vlw. =D

    ResponderExcluir
  15. Muinto bom o post, algumas tags eu uso com frequencia, so o codigo Marquee que não é bem vindo nos sites de hoje em dia.

    ResponderExcluir
  16. Oi, eu gostaria de saber o código HTML do Underline, você sabe qual é?

    ResponderExcluir
  17. @stacy
    O código é <ins>texto</ins>

    ResponderExcluir
  18. Olá.... sou programador e analista de sistemas, seus códigos são d+... até vou utilizar uns deles no meu blog.

    flw

    ResponderExcluir
  19. marquee é obsoleto já... assim como flash para esses efeitos... use javascript pra isso..

    ResponderExcluir
  20. Oi
    valeu pelos códigos! estava procurando o do Email há tempos...
    beijos surtados!
    Re

    ResponderExcluir
  21. Oi
    Legal esse post sobre dicas, é uma das minhas primeiras visitas a esse blog e valeu mto a pena conhecer

    ResponderExcluir
  22. valeu esse post,dificilmente encontramos pessoas que se dedicam em compartilhar o que sabem,obrigado,em tempo parabens pelo blog,genial.

    ResponderExcluir
  23. Excelente !!! tá de Parabéns o Blog !!! vlw !!!

    ResponderExcluir
  24. Parabens amigo nos da www.guaruja.hd1.com.br agradecemos a você por divulgar esses códigos que são de grande valia para quem quer dar um encremento no site, abraços.

    ResponderExcluir
  25. eis um tópico excelente, já favoritei esta página, grande abraço.

    www.dinheirooportunidade.com.br (o blog que ensina a ganhar dinheiro com seus blogs)

    www.arcadetotal.com (tudo sobre games)

    ResponderExcluir
  26. Caracas, muito massa esse tópico!! Adorei as dicas! Curto html, apesar de saber bem pouco. :)
    Falando em html, vc me tiraria uma dúvida? (por favor, por favor!!). Estou tentando fazer aquele lance de "quebrar o texto", mas mesmo mudando de editor, o botão simplesmente não funciona! Será que tem algum código html pra fazer isso e não ter que depender do blogger?
    Bom, se puder me responder, fico muito agradecida!!
    Abraços.

    ResponderExcluir
  27. ADOREI!!!
    Meu site, MNS, é feito com html, e maior parte veio deste blog. Obrigado pela ajuda. Queria saber uma coisa, existem códigos html para se puder fazer login? Mas que sejam fáceis e que funcionem. De todos os html que vi para login, nenhum deles deu. Obrigado.

    MNS -> www.mns.pt.vg > Tudo sobre Tudo

    ResponderExcluir
  28. Fino d +++++++!!!!!

    Parabéns!

    ResponderExcluir
  29. Olha, "tá véi" que não vejo um site assim. Legal mesmo. Estava procurando o código para colocar descrição em link e encontrei quatro códigos pertinentes, então misturei tudo e deu uma "explosão" legal. PARABÉNS. Obrigado. Coloquei o link deste site no meu www.cadaza.net.

    ResponderExcluir
  30. poxa valew...ajudo d+

    vcs tao na minha Home Page

    Brigadão !!!!

    ResponderExcluir
  31. A DEDETIZADORA GUARUJÁ PARABENIZA ESTE SITE PELO SERVIÇO PRESTADO A TODOS. www.guaruja.hd1.com.br

    ResponderExcluir
  32. muito bom eu usei quase todos e funcionou vlw

    ResponderExcluir
  33. Site muito bom

    se quiser aprender mais viste meu blog!

    http://gustavohtmlbasico.blogspot.com/

    ResponderExcluir
  34. Parabéns acessem meu blog de downloads Gratis e sem protetor de links Utilidades da Net
    http://www.utilidadesdanet.co.cc

    ResponderExcluir
  35. como faço para colocar aquelas estrelinhas e marcador de tempo . www.putariagostosinha.com

    ResponderExcluir
  36. boa kra, otimo post

    www.centermusics.blogspot.com

    ResponderExcluir
  37. preciso enviar o resultado de um formulário de pesquisa para o meu email, como eu faço, uso o radio box.

    guh@live.be

    ResponderExcluir
  38. Muito obrigada pelas dicas!!
    Quebrou um galhão pro meu blog profissional. Com certeza vai facilitar que os clientes entrem em contato com mais frequência. Pode ter certeza que VC FEZ A DIFERENÇA pra muita gente (os que escrevem são uma pequena minoria)!

    ResponderExcluir
  39. gistei eu estou progamando meu proprio html e vc me deu varias ideias

    ResponderExcluir
  40. Adenda (permita-nos)
    .
    HTML e Código são coisas distintas. Não é correto dizer “código HTML”.
    HTML é uma linguagem e não um código.
    E também não é “o” HTML e, sim “a” HTML. “Linguagem” é um substantivo feminino.
    .
    HTML
    Abreviação para a expressão inglesa “HyperText Markup Language”, que significa Linguagem de Marcação de Hipertexto, logo, é uma linguagem de marcação utilizada para produzir páginas na Web.
    Tim Berners-Lee criou a HTML original.
    Sir Timothy John Berners-Lee KBE, OM, FRS (TimBL ou TBL) (Londres, 8 de junho de 1955) é um físico britânico, cientista da computação e professor do MIT, a quem é creditada a invenção da World Wide Web (www.).
    A linguagem foi definida em especificações formais na década de 1990, inspirada nas propostas originais de Tim Berners-Lee em criar uma linguagem baseada em SGML para a Internet.
    .
    Linguagem de Programação
    Uma linguagem de programação é um método padronizado para comunicar instruções para um computador.
    O primeiro trabalho de linguagem de programação foi criado para um computador que existia, criado por Ada Lovelace.
    Ada Augusta Byron King, Condessa de Lovelace (Londres, 10 de Dezembro de 1815 – Londres, 27 de Novembro de 1852) é principalmente conhecida por ter escrito um programa que poderia utilizar a máquina analítica de Charles Babbage.
    Lady Lovelace, única filha legítima do poeta britânico Lord Byron e sua esposa, Annabella, é reconhecida como a primeira programadora de toda a história.
    .
    Fontes:
    http://pt.wikipedia.org/wiki/HTML
    http://pt.wikipedia.org/wiki/Ada_Lovelace
    http://pt.wikipedia.org/wiki/Tim_Berners-Lee
    http://pt.wikipedia.org/wiki/Linguag...a%C3%A7%C3%A3o
    http://forum.clubedohardware.com.br/webcam-como-colocar/1027393?p=5507961
    .

    ResponderExcluir
  41. acesse:http://joaojogosjogo.wenode.com

    ResponderExcluir
  42. Sou iniciante na construção de sites sse post é SENSACIONAL !!!
    Parabéns!!!

    ResponderExcluir
  43. acesse ai garera:
    http://jogostodosqui.no.comunidades.net/
    eu sigam eu no twitter @joao_inacio17

    ResponderExcluir
  44. Ótimo tutorial com códigos HTML.

    Fórum maker (sobre uma engine capaz de fazer games) =]

    tsukurubrasil.forumeiros.com/forum

    ResponderExcluir
  45. O melhor sistema de TV HD www.tvhd.com.br

    ResponderExcluir
  46. eu fiz um bagulho mto louco com isso nem sei como deu certo pqp mas fiko foda.

    ResponderExcluir
  47. http://www.bloggerdorod.blogspot.com

    ResponderExcluir
  48. Parabéns pelas aulas. Certamente muita gente conseguir respostas para muitas dúvidas.
    E tenho uma nova dúvida. É possível copiar o código de formulários criado no googledocs e passas para o meu blog sem ter relação com o google. Criei um formulário, que é gratis no Gdocs e não sei como copiar para o meu blog. Você realiza este tipo de trabalho? Eu preciso de um formulário para os visitantes relatar acidentes, locais e valores. Obrigado, e se possível informe preços.

    ResponderExcluir