ATENÇÂO!!! PARA MELHOR VIZUALIZAÇÂO DOS CÓDIGOS ABAIXO, DEIXE A PÁGINA CARREGAR POR COMPLETA.
Aqui 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:APENAS EDITE O QUE ESTIVER DE VERMELHO NOS CÓDIGOS ABAIXO.
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á-e-pra-cá
APRENDA-KI
<marquee behavior=alternate width="190"
scrollamount="7" scrolldelay="96" height="20"
bgcolor="#E0FFFF"><font size="5">APRENDA-KI</font></marquee>
Exemplo 2: Scrolling text
A
P
E
N
D
A
-
K
I
<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>A<br>P<br>R<br>E<br>N<br>D<br> A<br>-<br>K<br>I</b></font style="font-family:arial;></marquee>
Exemplo 3: Scrolling Text
APRENDA-KI É UM BLOG TOTALMENTE INTERATIVO
<marquee direction="right"
bgcolor="#E0FFFF">APRENDA-KI É UM BLOG TOTALMENTE INTERATIVO</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ódigos 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
<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.
APRENDA-KI
<acronym title="Um blog...">APRENDA-KI</acronym>
Exemplo 2: ins e del
Eu
Eu <del>gosto</del> <ins>Amo</ins> APRENDA-KI
Exemplo 3:blockquote
<blockquote>Exemplo da tag blockquote</blockquote>
Exemplo da tag blockquote
A tag é feita para dar margem. Você pode dar estilo com CSS.
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://aprenda-ki.blogspot.com" 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://aprenda-ki.blogspot.com/2010/11/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
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/"/>
display: none;
0 comentários:
Postar um comentário