30 de setembro de 2015 | Tech & Games | Texto: | Ilustração: Isadora Maríllia
HTML para purpurinar o seu Tumblr!

O Tumblr é uma rede social muito usada hoje em dia. Ele conseguiu se estabelecer no meio termo entre o blog convencional e o Twitter. Dentre as diversas funções oferecidas para os usuários (texto, foto, link, áudio, chat e vídeo etc.), uma delas é a flexibilidade para moldar a página – e é por isso que estamos aqui hoje!

Pode parecer complicado (ou até mesmo ser, dependendo do quanto você queira alterar), mas a princípio vamos com alguns conceitos mais fáceis para começar em detalhes mais básicos.

Na maioria das plataformas, uma das primeiras coisas com a qual nos preocupamos é dar um tapa na aparência da nossa conta/página – customizá-la – para que nos identifiquemos mais ainda com o espaço e, consequentemente, nos deixando mais confortáveis para continuar nos expressando por meio da plataforma, ou seja, atribuir uma identidade. Ainda assim, mesmo quando conseguir encontrar o tema ~perfeito~, você poderá se deparar com alguns detalhes que não te agradam.

Mesmo que você não saiba nada de programação, experimente ir ao editor HTML. Hoje nosso plano aqui é passar uns conceitos básicos para quem não tem ideia de como identificar e mudar alguns comandos, mas sempre é recomendado que a pessoa pratique um pouco também. Talvez pareça complicado, mas é consideravelmente intuitivo e, além de resolver o que esteticamente te desagrada na sua página, pode despertar seu interesse por programação.

Basicamente, o código é organizado em variáveis e blocos. Existem variáveis para praticamente todos os elementos utilizados em um blog e, consequentemente, isso nos faz poupar bastante tempo de desenvolvimento. As variáveis do Tumblr começam e terminam sempre com chaves; já os blocos servem para conjuntos inteiros de conteúdo (como uma postagem, por exemplo) ou para renderizar blocos de HTML (como o bloco de comentários). Eles também são localizados entre chaves e devem ser abertos e fechados com uma barra diagonal.

No caso do HTML, entre <html> e </html> estará todo o conteúdo do seu blog; o <head> e </head> engloba as informações como scripts e título; entre <body> e </body> estará todo o conteúdo visível da sua página. O próprio Tumblr tem um guia, com todas as variáveis disponíveis para alteração do código. Vou passar, então, alguns comandos superbásicos, mas que já permitem fazer várias mudanças.

Vejam alguns dos mais importantes.

Dimensões

  • width: largura.
  • height: altura.

Margens

  • margin-top: do conteúdo até o topo da página.
  • margin-bottom: do conteúdo até o final da página.
  • margin-left: do conteúdo até o lado esquerdo da página.
  • margin-right: do conteúdo até o lado direito da página.

Bordas

  • border-color: cor da borda.
  • border-style: estilo da borda.
  • border-width: tamanho da borda.

Escrita

  • font-family: para colocar a fonte que quer usar.
  • font-size:  tamanho da fonte.
  • font-style: estilo da letra (Exemplo: itálico).
  • color: cor da letra.
  • text-align: serve pra alinhar o seu texto (Exemplo: center, left ou right).
  • letter-spacing: espaço entre as letras.
  • word-spacing: espaço entre as palavras.
  • background: cor do fundo.

Para saber mais, por que não visitar esses dois sites que também ensinam HTML e CSS, além de outras linguagens? E o melhor, gratuitamente!

Dash
Code Cademy

 

Tags: , , ,
Sobre

A Capitolina é uma revista online independente para garotas adolescentes. Nossa intenção é representar todas as jovens, especialmente as que se sentem excluídas pelos moldes tradicionais da adolescência, mostrando que elas têm espaço para crescerem da forma que são.

Arquivos