— Tutorial Básico CSS/HTML —

Para passar um pouco o tempo, eu resolvi criar esse tutorial básico de CSS/HTML para ensinar a vocês e, principalmente, aos futuros staffers e alguns atuais também, como fazer algumas coisas bonitinhas com isso. Lembrando que é um tutorial BÁSICO. Então vou ensinar algo bem simples e tentar ser bem detalhista. No final, você deve conseguir criar uma mini-ficha como essa:

— WHO THE HELL DO YOU THINK I AM?!
Nome:	Noskire
Idade:	21
Sexo:	Masculino
Altura:	1,88m
Peso:	80Kg
Profissão:	Vagabundo
Poder:	Ser FODA!

Para quem ainda não percebeu, isso daí que eu fiz foi uma tabela com 2 colunas e 9 linhas (Texto, imagem e 7 informações). Uma tabela tem 3 codes/tags: table indica a tabela em si, tr indica as linhas e td indica as colunas. Um exemplo de tabela seria:

As informações vem aqui! (Entre os tds)

Código:

<center><table><tr><td>As informações vem aqui! (Entre os tds)</td></tr></table></center>

Mas ai não há nenhum efeito, esta bem simples até então. Então vamos começar adicionando uma borda a essa tabela. Para isso, vamos precisar usar style, que serve para estilizar alguma coisa em CSS, e border, que representa a borda da tabela. Portanto, nossa tabelinha ficará assim:

As informações vem aqui! (Entre os tds)

Código:

<center><table style='border: solid 5px darkcyan;'><tr><td>As informações vem aqui! (Entre os tds)</td></tr></table></center>

Como disse antes, style é para estilizar a tabela. Tudo o que estiver entre ' (apóstrofo) será parte da estilização. border: indica que o que vem a seguir irá modificar a borda da tabela. solid significa que a borda será sólida, contínua. Uma outra opção seria double. 5px indica a espessura da borda. darkcyan indica a cor, também é possível usar cores em hexadecimal (Ex.: #008000). Por último vem o ; (ponto e vírgula) indicando que a estilização da borda acaba ali.

Agora vamos adicionar mais duas coisas. width, que indica a largura da tabela, o que manterá as coisas mais organizadas, e padding, que indica a distância, em pixels, da borda da tabela para o seu conteúdo. Se você olhar para a mini-ficha no começo do post, verá que há um espaço vazio entre a borda e o conteúdo, isso é o padding. A tabela ficará da seguinte forma:

As informações vem aqui! (Entre os tds)

Código:

<center><table style='width:250px; padding:10px; border: solid 5px darkcyan;'><tr><td>As informações vem aqui! (Entre os tds)</td></tr></table></center>

Já esta ficando mais bonitinho! :D E eu já expliquei quase tudo que você precisará aprender. Entre os tds (no lugar do texto), é possível usar todas as funções comuns do fórum, como negrito, itálico, cor, img... Então vamos personalizar o texto, adicionar a imagem e criar a primeira linha de informações.

— WHO THE HELL DO YOU THINK I AM?!
Nome:	Noskire

Código:

<center><table style='width:250px; padding:10px; border: solid 5px darkcyan;'><tr><td>[center][b]— WHO THE HELL DO YOU THINK I AM?![/b][/center]</td></tr><tr><td>[center][img]http://i.imgur.com/0XbqtMB.jpg[/img][/center]</td></tr><tr><td>[center][b][color=darkblue]Nome:[/color][/b][/center]</td><td>[center][b]Noskire[/b][/center]</td></tr></table></center>

Notou o erro? Nome esta centralizado com o resto da tabela, enquanto que Noskire esta excluído ali no lado. Isso é porque as duas primeiras linhas (texto e imagem) possuem apenas uma coluna, enquanto que a última linha (a do nome) possui 2. As tabelas sempre serão retangulares, por causa disso, o CSS irá criar uma tabela com 3 linhas e 2 colunas e deixará as duas colunas das primeiras linhas vazias. Para consertar isso, queremos que nas duas primeiras linhas, a primeira (e única) coluna ocupe o espaço de duas. Para isso, usaremos o colspan dentro da tag td (lembre-se que td indica as colunas).

— WHO THE HELL DO YOU THINK I AM?!
Nome:	Noskire

Código:

<center><table style='width:250px; padding:10px; border: solid 5px darkcyan;'><tr><td colspan="2">[center][b]— WHO THE HELL DO YOU THINK I AM?![/b][/center]</td></tr><tr><td colspan="2">[center][img]http://i.imgur.com/0XbqtMB.jpg[/img][/center]</td></tr><tr><td>[center][b][color=darkblue]Nome:[/color][/b][/center]</td><td>[center][b]Noskire[/b][/center]</td></tr></table></center>

Agora só falta uma única coisa para terminarmos nossa mini-ficha. background indicará o fundo da tabela. Se colocarmos background seguido de uma cor (seja em nome ou em #hex), criará o efeito das barras coloridas. Além disso, também colocarei width:125px; nos tds, com exceção do texto e da imagem, para que a divisão entre Nome e Noskire fique exatamente no meio da tabela. (Lembre-se que a largura da tabela é 250, o dobro de 125) Se adicionarmos isso, teremos:

— WHO THE HELL DO YOU THINK I AM?!
Nome:	Noskire

Código:

<center><table style='width:250px; padding:10px; border: solid 5px darkcyan;'><tr><td colspan="2" style='background:darkcyan;'>[center][b]— WHO THE HELL DO YOU THINK I AM?![/b][/center]</td></tr><tr><td colspan="2">[center][img]http://i.imgur.com/0XbqtMB.jpg[/img][/center]</td></tr><tr><td style='width:125px; background:darkcyan;'>[center][b][color=darkblue]Nome:[/color][/b][/center]</td><td style='width:125px; background:darkcyan;'>[center][b]Noskire[/b][/center]</td></tr></table></center>

E TCHARAM! Sei lá como se escreve isso Agora você já sabe criar uma tabela com alguns efeitos simples, mas legais ou não.

Para adicionar as demais informações, é só copiar a linha do nome e trocar o texto. Espero que tenha sido útil e sirva para alguma coisa. Se tiverem alguma dúvida, postem AQUI, pois outras pessoas podem ter a mesma dúvida. Desafio vocês a criarem suas próprias mini-fichas, usando outra imagem, outras cores, outro tamanho e, se quiserem, até mesmo outra forma (Quem sabe a ficha no lado direito e as informações no lado esquerdo não fique melhor?). Postem suas fichas aqui e veremos quem faz melhor.

Se gostarem do tutorial, também postem aqui, quem sabe eu crio outro depois. c: Também aceito críticas e sugestões, além de pedidos para os próximos tutoriais, se houver. Até. (/ºoº)/