[Tutorial em Contrução]Truques HTML bestas para assinatura

Bem, como estou com pressa agora, não vou ensinar, vou só mandar um ou 2 codigos e depois eu completo e explico e ensino mais coisas


Raziel, como voce faz para dividir sua assinatura em 2?

simples, eu crio uma table, e coloco a imagem de um lado e o texto com meus tutoriasi do outro
vou explicar algimas de um jeito meio porco mais será util pra gente que quer por uma imagem e um texto na assinatura sem levar advertencia por assiantura grande, ai vão os conceitos:
table = Tabela,
Tr = Coluna(não será nessesário proque o forum pode usar Enter),
Td = linha,
Cellspacing = Espaço entre uma linha/coluna e outra, mais como eu não vou usar TR, irá apenas fazer espaço entre uma linha e outra

Crio a table, inicio uma nova linha, e uma nova coluna, insro o dado, fecho a linha, abro uma nova linha, insiro o novo codigo, fecho a lionha, a coluna e a tabela, fica assim:

CAMPO1,1 Campo1,2

Campo2,1 Campo 2,2

Código:

<table cellspacing=30><td>CAMPO1,1
Campo1,2</td><td>Campo2,1
Campo 2,2 </td></table>

Como fazer o Texto Rodar?

Texto: Oi! bom dia! boa tarde! boa noite!

Código:

<marquee>Texto: Oi! bom dia! boa tarde! boa noite!</marquee>

CODIGO DA MINHA ASSINATURA:

Visitem a area do Anime vs Games!!!	Meus Tutoriais Mdlvis - Animação Básica NOVO! Criando um Pottrait para um model MELHORADO! Criando um Item Recipe Taverna + Modo AP/AR Variáveis Destruindo Leaks Criando Minimapa Como importar models Organizar incones de magias

Código:

<table cellspacing=30><tr><td>
<center>[color=orange][size=15]Visitem a area do Anime vs Games!!![/size][/color]
[url=http://teamkings.forumeiros.com/animes-vs-game-area-c10/][img]http://img442.imageshack.us/img442/8611/banerz.gif[/img][/url]</center></td><td>
[size=18]Meus Tutoriais[/size]
[url=http://teamkings.forumeiros.com/t2079-mdlvis-basico-animacoes#19585]Mdlvis - Animação Básica[/url] [size=9] [i]NOVO![/i][/size]
[url=http://teamkings.forumeiros.com/t294-tutorial-criando-um-pottrait-para-um-model]Criando um Pottrait para um model[/url][size=9] [i]MELHORADO![/i][/size]
[url=http://teamkings.forumeiros.com/t2005-tutorialitem-recipe#17986]Criando um Item Recipe[/url]
[url=http://teamkings.forumeiros.com/t1995-tutorial-a-taverna-modo-ar-ap-simples]Taverna + Modo AP/AR[/url]
[url=http://teamkings.forumeiros.com/tutoriais-f7/tutorial-variaveis-inclue-uma-magia-basica-t1163.htm#10010]Variáveis[/url]
[url=http://teamkings.forumeiros.com/tutoriais-f7/tutorial-como-cacar-leaks-t1151.htm]Destruindo Leaks[/url]
[url=http://teamkings.forumeiros.com/tutoriais-f7/tutorial-criando-uma-tela-de-minimapa-para-warcaft-t449.htm]Criando Minimapa[/url]
[url=http://teamkings.forumeiros.com/tutoriais-f7/tutorial-como-importar-models-print-screen-t958.htm]Como importar models[/url]
[url=http://teamkings.forumeiros.com/tutoriais-f7/tutorial-object-editor-como-organizar-suas-magias-no-seu-hero-t671.htm]Organizar incones de magias[/url]
 <td><tr></table>

Atributos

by IkY

Em html não fazemos as coisas apenas com as tags em si!

C-Como Assim???

Eu explico, atributos são informações amais nas tags, de forma a altera-las .
Por exemplo no código abaixo, temos a tag table ! \o/ , na tag tem "cellspacing", isso é um etributo, uma tag pode ter varios atributos, isso abre muitas possibilidades.

Código:

<table cellspacing=30><td>CAMPO1,1
Campo1,2</td><td>Campo2,1
Campo 2,2 </td></table>

Tipo, vamos mostrar na prática. Vamos usar a tag img, para imagens. Ela originalmente é assim ne? (olhe a abaixo)

Código:


<img src="IMAGEM" />


Nela há o atributo para colocar o endereço da imagem, mas tem um atributo que muda o visual. Alguns já ouviram falar, o nome é

STYLE

:
Ela funciona da seguinte forma.

Código:

<img style="tudo vem aqui" src="imagem" />

Vou mostrar agora umas magicazinhas que ela faz. Na verdade esse atributo é uma porta para outra linguagem de programação voltada para a estilização de objetos de pagina, o nome desta linguagem é CSS

Magica background

O nome sugeri bastante ne? ela altera o fundo, tanto com cores como com imagens.
Ficaria na tag assim para cores, se quiser uma tabela com o codigo das cores pode se ver aqui

Código:


<img style="background:#FFFFFF;" src="imagem" />


E com imagem no fundo...

Código:


<img style="background:url('endereço da imagem') repeat y;" />
<img style="background:url('endereço da imagem') repeat x;" />
<img style="background:url('endereço da imagem') repeat ;" />
<img style="background:url('endereço da imagem') no-repeat ;" />


Primeiro "url('url') repeat y" esse repeat y, significa que pra repetir a imagem na vertical
"url('url') repeat x" esse repeat x, significa que pra repetir a imagem na horizontal
"url('url') repeat " esse so repeat, significa que pra repetir a imagem na horizontal e na vertical
"url('url') no-repeat " esse no-repeat, significa que é pra nao repetir

Magica border-radius

Vocês conhecem a border nao é? aquele atributo que faz a borda de alguma coisa, tipo

Código:


<img src="http://www.w3schools.com/Css/klematis.jpg" border="#ccc 1px" />


E o width( atributo usado para determinar a largura ) e heigth(usado para a altura)
Certo, mas o que isso tem a ver??? Simples, o nome fala border-radius, funciona assim:
Deixa curvada a borda de um objeto, so que tem que colocar a referencia e nao funciona com img, so com div( que é um bloco de html, vamos usar o background para por a imagem e em seguida o border-radius separando por ";") , tipo:

boder-top-left-radius:20px 20px;

<< para o canto em cima á esquerda

boder-top-right-radius:20px 20px;

<< para o canto em cima á direita

boder-bottom-left-radius:20px 20px;

<< para o canto em baixo á esquerda

boder-bottom-right-radius:20px 20px;

<< para o canto em baixo á direita

O mais interessante é qu o efeito vai ser de uma imagem, mas nao vai ser uma imagem ^^

Código:


<div style="background:url('http://www.w3schools.com/Css/klematis.jpg');border-top-left-radius:40px 40px;width:100px;height:100px;" /></div>


Qualquer duvida, tamos aqui

Legal a iniciativa do tuto, aguardo anciosamente a versao completa
OFF
eu queria que o troia bolasse tags para funções css, ajudaria ou nao? ^^

para gente já deixar o codigo pronto(tipo estilização das tabelas) para que agente possa usar na mensagem de uma vez sem presisar de digitar toda hora cellspacing, borderstyle, color e por ai vai?

seria útil sim....
mais não acho que seja possivel já que o forumeiros não permite muitas alterações no css, e tambem eu nunca tentei, porque eu prefiro ficar lonje da estilização do forum

é mais tira quase toda liberdade quando for fazer coisas do tipo
e tb a falta de javascript

é que o forumeiros é free

voce pode adicionar codigos no tutorialzinho se quiser(como eu disse no outro topico)

Atualizado.
Desculpem o post sem precisao, nao sei como fazer "subir" o topico na lista

mais é postando assim mesmo

muito bem explicado!

parabens

eu vou sair agora(jogar d&d) e amanhã eu posto umas coisas para melhorar o marquee

flw, vou postar mais tarde tb, OFF to assistindo naruto (episodio novo)

eu tenho uma duvida
eu nao sei como coloca no furom
pra quando clicarem numa imagem e ir pra outro site
como a assinatura do Iky
pode me explicar?

voce clica num icone que fica logo ao lado de imagem,(em cima de onde voce digita a mensagem), o nome é LINK, na caixa de cima voce bota o link, e na de baixo a imagem , com as tags IMG e /IMG entre cochetes

mais eu acho que voce já fez isto, oilhando pela sua assinatura...

vc esta meio atrasado
ashashash
foi mal ja me ensinaram isso ^^