Como criar theme do zero
(Atualizado dia 28/07/2014 com regras da nova atualização do HTML, o HTML5.)
Vou fazer este tutorial em 3 partes: primeiro vou ensinar como começar, depois ensino CSS e por último os códigos do tumblr.
Introdução:
Pra quem não sabe, para criar páginas na web existe uma linguagem chamada HTML, e é essa linguagem que usamos para criar themes, então eu vou ensinar e explicar como ela funciona.
Você pode fazer seu theme pelo customize do seu tumblr mesmo (abra o customize do seu tumblr > clique em Editar HTML > apague tudo o que estiver no HTML e comece o seu theme).
No HTML usamos "tags" que são indicadas pelos sinais de menor (<) e maior (>) com o nome da tag no meio. Como por exemplo, a tag html é indicada assim:
<html>
E para fechá-la colocamos uma barra antes do nome, desse jeito:
</html>
IMPORTANTE: toda tag que é aberta deve ser fechada (bem, quase todas, mas eu vou mostrando ao longo do tutorial quais tags não têm fechamento), se não seu theme (ou site) pode não funcionar direito.
Começando a criar:
Começamos indicando que o que estamos criando é um código HTML, para isso usamos a tag <html>. Assim: exemplo. O tumblr já vai automaticamente fechar a tag pra você.
Dentro da tag html é que vai ficar todo o código do nosso theme ou site. Então dentro dessa tag colocamos mais duas tags que são as tags <head> e <body>. Assim: exemplo. O "head" é a cabeça do site e o "body" é o corpo. No "head" vão os comandos do código e no "body" vai tudo o que vai aparecer no theme.
Dentro da tag <head>, colocamos a tag <title>, que é onde vai o título do blog. Assim: exemplo. O que escrevermos dentro do <title> é o que vai aparecer na abinha do navegador. Por exemplo, escreva alguma coisa dentro do <title> (exemplo), depois salve (para poder salvar você vai precisar escrever alguma coisa dentro do <body>: exemplo) e abra o seu blog. A abinha vai ficar assim: exemplo.
Dentro tag <head>, também colocamos essa tag:
<link rel="shortcut icon" href="LINK_DE_UMA_IMAGEM"/>
Ali onde eu escrevi "LINK_DE_UMA_IMAGEM" você substitui pelo link da imagem que quer como seu favicon (favicon é esse íconezinho aqui: exemplo).
OBS: Nos prints eu dei espaço entre as tags, mas isso não altera nada no código, ok? Só deixa o código mais organizadinho. Desde que as tags estejam nos lugares certos (<body> e <head> dentro de <html>; <title> dentro de <head>...).
Formatação de textos:
Como o nosso texto irá aparecer no theme, nós o colocaremos dentro do <body>. Mas olha só o que acontece quando colamos um texto todo arrumadinho no código: exemplo. Na visualização o texto fica todo bagunçado. Então vamos formatar este texto.
Para criar um título, usamos a tag <h1>. Tudo o que ficar entre <h1> e </h1> será o título, assim: exemplo. Também temos as tags <h2>, <h3>, <h4>, <h5> e <h6>. O <h2> é um subtítulo, o <h3> um subtítulo de um subtítulo, e assim vai... Quanto maior o número, menor o tamanho da letra.
Para criar parágrafos usamos a tag <p>. Tudo o que estiver entre <p> e </p> será um parágrafo. Assim: exemplo.
Para fazer quebras de linha usamos a tag <br/> (essa tag não tem fechamento, por isso ela já tem uma barra na frente ou depois do nome, tanto faz... se não quiser não precisa nem colocar a barra). Assim: exemplo.
Para deixar o texto em negrito, usamos a tag <b> ou a tag <strong>. Todo texto que ficar entre <b> e </b> ou entre <strong> e </strong> ficará em negrito.
Para o texto ficar em itálico usamos a tag <i> ou a tag <em>. Todo texto que ficar entre <i> e </i> ou entre <em> e </em> ficará em itálico.
Para o texto ficar riscado usamos a tag <del> (antes se usava a tag <strike> para isso, mas com o surgimento do HTML5 essa tag será substituída pela tag <del>). Todo texto que ficar entre <del> e </del> ficará riscado.
Para sublinha o texto usava-se a tag <u>, mas com o surgimento do HTML5 essa tag não será mais usada. Para deixar um texto sublinhado faremos isso pelo CSS, que eu vou ensinar depois.
Temos a tag <small>, todo texto que ficar entre <small> e </small> ficará em tamanho menor.
Temos a tag <big>, todo texto que ficar entre <big> e </big> ficará em tamanho maior.
Temos a tag <sub>, todo texto que ficar entre <sub> e </sub> ficará... mais para baixo, eu não sei como que se chama isso, kkk.
Temos a tag <sup>, todo texto que ficar entre <sup> e </sup> ficará mais para cima, ao contrário do <sub>, rs.
Veja o exemplo: exemplo. No exemplo eu marquei com uma linha de cada cor cada uma das tags que eu citei (menos o <em> e o <strong>, mas funcionam da mesma forma).
Você pode colocar essas tags umas dentro das outras se quiser. Por exemplo, se você quer que um texto fique em negrito e dentro dessa parte em negrito você quer pôr uma parte em itálico e dentro da parte em tálico você quer riscar uma palavra... Vai funcionar assim:
<p> <b><i>You opened up the scars again, <del>consume me like a cancer</del>. Bringing on my wicked might, distorting all the answers why!</i> The more I try to walk away the more you flaunt it in my face enticing me with all that I hate. I can't stop the pain. And I'm suffering. I want you erased. I've had enough!</b> </p>
Nesse código temos um parágrafo (pois está entre <p> e </p>) com o trecho de uma música que eu gosto (hehe :3), o texto está todo em negrito (porque ele está entre <b> e </b>), as primeiras frases estão em negrito e itálico (porque estão entre <i> e </i> que está entre <b> e </b>) e a frase "consume like a cancer" está riscada, em itálico e em negrito (porque está entre <del> e </del> que está dentro de <i> e </i> que está dentro de <b> e </b>). Acho que essa minha explicação ficou meio confusa, rs. Então fiz um print: exemplo.
Também temos as tags <ul> e <ol> que servem para fazer listas. A <ol> é para lista ordenada (com números) e <ul> para lista não ordenada (sem números). Mas para a lista funcionar, cada linha deve ser representada pela tag <li>. Assim:
<ul> <li>Item 1;</li> <li>Item 2;</li> <li>Item 3;</li> </ul>
A quantidade de <li> que você colocar será a quantidade de linhas que sua lista vai ter. Veja como fica: exemplo.
Pelo HTML também podemos criar tabelas, mas não é algo muito útil na criação de themes então não vou ensinar aqui. Mas se quiserem peçam na ask que eu ou outra moderadora posta quando tiver tempo.
Imagens:
Para colocar uma imagem a tag é esta:
<img src="LINK_DA_IMAGEM" />
Essa tag não tem fechamento por isso colocamos a barra no final, como está ali. Assim: exemplo.
Links:
Para colocar um link usamos a tag <a>, tudo o que estiver entre <a> e </a> funcionará como link. Porém, para o link funcionar precisamos colocar o endereço dele e para isso fazemos assim:
<a href="LINK_AQUI"> TEXTO OU IMAGEM AQUI</a>
Por exemplo, assim: exemplo.
Para colocar link em uma imagem é a mesma coisa, você vai colocar o código da imagem dentro do link: Assim:
<a href="LINK_AQUI"> <img src="LINK_DA_IMAGEM/></a>
Ah, é bom saber disso também: para fazer com que o link abra em uma nova guia quando a pessoa clicar nele, colocamos target="_blank" na tag do link. Assim:
<a href="LINK_AQUI" target="_blank" > xxx </a>
~ x ~ x ~ x ~ x ~ x ~ x ~ x ~ x ~ x ~ x ~ x ~ x ~ x ~ x ~
Essa é a primeira parte do tutorial, veja o resto nestes links aqui:
Como fazer theme (Parte 2)
Como fazer theme (Parte Final)
Se tiver gostado, por favor, dê like para sabermos se foi útil. Qualquer dúvida, venha na ask, estamos aqui pra isso. (: