Olá, Convidado! Você esta entrando em um mundo novo, chamado de City Of Heroes. Temos como base e inspiração para nosso RPG, as empresas COMICS e MARVEL, e com essa inspiração magnifica estamos criando esse mundo, onde você se torna o Herói ou Vilão.

Boa sorte!

...Você foi Escolhido !!

Últimos assuntos

» — Sugestão: Criação de Técnicas —
por Hien Qui Dez 04 2014, 20:55

» — Sugestão: Lista de Equipamentos —
por Hien Qui Dez 04 2014, 20:51

» — Sistema Militar —
por Hien Qua Dez 03 2014, 22:04

» — Aprimoramentos —
por Hien Qua Dez 03 2014, 14:04

» — Pericias —
por Hien Qua Dez 03 2014, 13:01

» — Uniformes —
por Hien Qua Dez 03 2014, 12:58

» Votação: Você gostou da mudança do Fórum?
por Hien Ter Dez 02 2014, 19:08

» — Noticias: Cidades—
por Hien Seg Dez 01 2014, 00:06

» — ENQUETE HERO —
por Hayashi Sab Nov 29 2014, 15:02

» — Tutorial Básico CSS/HTML —
por Sàrin Iyasu Sab Nov 29 2014, 01:02

» FAÇA PARTE DESSA EQUIPE !
por Sàrin Iyasu Sex Nov 28 2014, 23:05

» — Regras de Narração —
por Hien Qui Nov 27 2014, 21:28

» — Regras de Conduta —
por Hien Qui Nov 27 2014, 21:27

» — Profisssões —
por Hien Qui Nov 27 2014, 21:24

» — Alinhamentos —
por Hien Qui Nov 27 2014, 21:18


Você não está conectado. Conecte-se ou registre-se

— Tutorial Básico CSS/HTML —

Ir em baixo  Mensagem [Página 1 de 1]

1 — Tutorial Básico CSS/HTML — em Qua Nov 26 2014, 23:53

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º)/

Ver perfil do usuário

2 Re: — Tutorial Básico CSS/HTML — em Qui Nov 27 2014, 14:01

Maneirão o tuto, eu mesmo não manjo nada desses bagui, agora comecei a entender um pouco.

Ver perfil do usuário

3 Re: — Tutorial Básico CSS/HTML — em Qui Nov 27 2014, 18:27

........ finalmente aprendi... obg senpai

Ver perfil do usuário

4 Re: — Tutorial Básico CSS/HTML — em Qui Nov 27 2014, 22:34

Tentem fazer algo parecido. A prática leva a perfeição.

Ver perfil do usuário

5 Re: — Tutorial Básico CSS/HTML — em Sex Nov 28 2014, 13:00

Legal isso. Útil pra dedéu se saberem usar, eu mesmo não sabia muitas coisas citadas acima.

Ver perfil do usuário

6 Re: — Tutorial Básico CSS/HTML — em Sab Nov 29 2014, 01:02

Útil!
Isto me ajudará muito, obrigado!!

Ver perfil do usuário

Conteúdo patrocinado


Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum